2

I am trying to use variables to specify breakpoints using the CSSnext plugin.

Currently my css looks like this: 

@media (width <= var(--screen-md-min)) {
    background-color: var(--brand-purple-dark);    
}

but when i try to run this I get the following warning in the console: 

5: Missing @custom-media definition for '--screen-md-min'. The entire rule has been removed from the output.

This code works fine if I replace var(--screan-md-min) with actual pixels. I am sure this is just a problem with syntax, but the CSSnext documentation does not make the use of variables very clear.

psvj
  • 8,280
  • 8
  • 30
  • 44

1 Answers1

10

cssnext only implements future-proof specifications. And per specification, it's not possible to use custom properties (that' depends on the dom (:root is html) in a media query (that does not depend on the dom, but instead depends on the device).

However, people working on CSS specifications have thought about a solution for custom media queries. It's @custom-media.

@custom-media --small-viewport (width < 30rem);

@media (--small-viewport) {
   /* styles for small viewport */
}

Some other informations

MoOx
  • 8,423
  • 5
  • 40
  • 39