Ever want to use CSS variables in media queries?
There's no native solution yet, but there's a W3C proposal for this: env() ✨
Install the PostCSS plugin for a glimpse at the future:
ALT Luckily, there's a PostCSS plugin to let you define custom environment variables with a similar syntax to CSS variables. Install the plugin with npm like so:
npm install postcss postcss-env-function
And define variables from your PostCSS configuration using the environmentVariables object.
Then, you can refer to variables from @media breakpoints using the env() function.
@media (min-width: env(--mobile-breakpoint)) { /* ... */ }