CSS native variables not working in media queries

by

From the spec,

The var() function can be used in place of any part of a value in
any property on an element. The var() function can not be used as
property names, selectors, or anything else besides property values.
(Doing so usually produces invalid syntax, or else a value whose
meaning has no connection to the variable.)

So no, you can’t use it in a media query.

And that makes sense. Because you can set --mobile-breakpoint e.g. to :root, that is, the <html> element, and from there be inherited to other elements. But a media query is not an element, it does not inherit from <html>, so it can’t work.

This is not what CSS variables are trying to accomplish. You can use a CSS preprocessor instead.

More Related Contents:

  1. CSS scoped custom property ignored when used to calculate variable in outer scope
  2. Why does the order of media queries matter in CSS?
  3. What is the difference between “screen” and “only screen” in media queries?
  4. Twitter Bootstrap 3: how to use media queries?
  5. CSS media queries: max-width OR max-height
  6. Is there a way to interpolate CSS variables with url()?
  7. How do I apply opacity to a CSS color variable?
  8. Media query to detect if device is touchscreen
  9. Common CSS Media Queries Break Points [duplicate]
  10. CSS media query to target only iOS devices [duplicate]
  11. What does @media screen and (max-width: 1024px) mean in CSS?
  12. CSS specificity, Media Queries and min-width
  13. CSS media queries – Order matters?
  14. Extending selectors from within media queries with Sass
  15. How to use a unitless CSS variables and later add the needed unit?
  16. Responsive css styles on mobile devices ONLY
  17. Why can’t I animate custom properties (aka CSS variables)?
  18. how to reset a CSS variable (aka custom properties) and use the fallback one?
  19. IE7, IE8 support for css3 media query [duplicate]
  20. Using attr to set css variable inline that work with CSP
  21. Max-Width vs. Min-Width
  22. How to make responsive table [closed]
  23. iPhone X / 8 / 8 Plus CSS media queries
  24. How can I avoid media query overlap?
  25. Single vs multiple stylesheets in responsive web design
  26. @import styles not working in a media query
  27. Media queries and background images
  28. Is there a difference between CSS custom properties and CSS variables?
  29. @media query not working in mobile. Works fine in Chrome
  30. @media media query and ASP.NET MVC razor syntax clash

Leave a Comment