@media
queries
PostCSS CSS Variables in PostCSS plugin to use CSS Custom Properties in @media
query parameters.
There's no specification for this! (but it feels so natural..)
Example
/* input */{}{} @));{}
/* output */{}{}{}
Install
npm install postcss-media-variables --save-dev
Usage
postcss-media-variables
has to be used twice!
Every other plugin is optional, but keep this order of plugins if you use any of them.
postcss-media-variables
(first occurence)postcss-custom-media
postcss-css-variables
and/orpostcss-custom-properties
postcss-calc
postcss-media-variables
(second occurence)postcss-media-minmax
Since v1.1.0, this plugin plays well with postcss-custom-media
!
Example
var fs = ;var postcss = ; var mediaVariables = ;var cssVariables = ;var customMedia = ;var calc = ; var mycss = fs; // Process your CSSvar output = // first run // second run css; console;
For more general PostCSS usage, see this section
In the first run, postcss-media-variables
inspects every @media
and every @custom-media
rule, parses their params and wraps the affected @media
rules into helper rules.
The information in the helper rules are calculated and resolved then.
In the second run, this plugin removes those helper rules again and uses the newly calculated information from there to change the @media
-rule parameters.
Non-Standard and not proposed - so why?
This plugin is created in personal need of a solution for the issue Resolve variables in media queries .