From 013a7489d9783ad6a0be2565586c43f435134ee6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Apr 2018 14:08:13 -0700 Subject: add examples to theming docs section on css vars in media queries, closes #26205 --- docs/4.0/getting-started/theming.md | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) (limited to 'docs') diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md index bbf8081b52..57cbaa424a 100644 --- a/docs/4.0/getting-started/theming.md +++ b/docs/4.0/getting-started/theming.md @@ -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 %} -- cgit v1.2.3