rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-28 20:52:21 +01:00
Code Issues Actions Packages Releases Activity

add examples to theming docs section on css vars in media queries, closes #26205

Browse Source
This commit is contained in:
Mark Otto 2018-04-05 14:08:13 -07:00
parent d8a39c9989
commit 013a7489d9
1 changed files with 21 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/4.0/getting-started/theming.md
View File

@ -419,4 +419,24 @@ a {
}
{% endhighlight %}
While we include breakpoints in our CSS variables, they unfortunately cannot be used in media queries. These remain in the compiled CSS for backward compatibility given they can be utilized by JavaScript. [Learn more in the spec.](https://www.w3.org/TR/css-variables-1/#using-variables)
### Breakpoint variables
While we originally included breakpoints in our CSS variables (e.g., `--breakpoint-md`), **these are not supported in media queries**, but they can still be used _within_ rulesets in media queries. These breakpoint variables remain in the compiled CSS for backward compatibility given they can be utilized by JavaScript. [Learn more in the spec.](https://www.w3.org/TR/css-variables-1/#using-variables)
Here's an example of **what's not supported:**
{% highlight css %}
@media (min-width: var(--breakpoint-sm)) {
...
}
{% endhighlight %}
And here's an example of **what is supported:**
{% highlight css %}
@media (min-width: 768px) {
.custom-element {
color: var(--primary);
}
}
{% endhighlight %}