@media
and @custom-media
CSS Custom Properties in
PostCSS plugin to use CSS Custom Properties in @media
and @custom-media
query parameters. Use ":root" scope only!
There's no specification for this!, but based on the specifications:
Example
/* input */ @)); {} /* becomes */ @) + 20)); {}
Install
npm install postcss-media-properties --save-dev
Usage
Every other plugin is optional, but use this plugin first.
Recommended to use postcss-calc
plugin for fix calc
nesting.
postcss-media-properties
postcss-custom-media
postcss-calc
postcss-media-minmax
Example
const fs = ;const postcss = ; const postcssMediaProperties = ;const postcssCustomMedia = ;const postcssCalc = ;const postcssMediaMinmax = ; const inputRaw = fs; // Process your CSSconst outputCss = css; fs;
For more exapmles, see PostCSS usage guide
Non-Standard functionality
This plugin is created in personal needs. Use CSS Custom Properties as part of media query not included in the standard or draft. But it's very convenient at large projects.