postcss-nested-vars
PostCSS plugin for nested Sass-like variables.
Introduction
Instead of assuming all variables are global, this plugin assumes the variable for which you are looking can be found in the current nested container context or in one of its ancestors (i.e., root, rule or at-rule).
;a
Transpiles into:
a
You can also target rule selectors, at-rule params and declaration properties with a special $(varName)
syntax, same as postcss-simple-vars
:
$) {)-
Transpiles into:
{
Related Projects
Installation
$ npm install postcss-nested-vars
Usage
JavaScript
;
TypeScript
; postcss;
Options
globals
Type: Object
Required: false
Default: {}
Global variables that can be referenced from any context.
logLevel
Type: string: <error|warn|silent>
Required: false
Default: error
If a variable cannot be resolved, this specifies how to handle it. warn
and silent
modes will preserve the original values (e.g., $foo
will remain $foo
).
Testing
Run the following command:
$ npm test
This will build scripts, run tests and generate a code coverage report. Anything less than 100% coverage will throw an error.
Watching
For much faster development cycles, run the following commands in 2 separate processes:
$ npm run build:watch
Compiles TypeScript source into the ./dist
folder and watches for changes.
$ npm run watch
Runs the tests in the ./dist
folder and watches for changes.