postcss-nested-vars

title="Philosopher’s stone, logo of PostCSS"
src="http://postcss.github.io/postcss/logo-leftp.png">



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).

``scss
$color: red;
a {
color: $color;
$color: white;
color: $color;
b {
color: $color;
$color: blue;
color: $color;
}
color: $color;
}
`

Transpiles into:

`scss
a {
color: red;
color: white;
b {
color: white;
color: blue;
}
color: white;
}
`

You can also target rule selectors, at-rule params and declaration properties with a special $(varName) syntax, same as postcss-simple-vars:

`css
$bar: BAR;
$(bar) {}
@media foo$(bar) {
foo-$(bar)-baz: qux;
}
`

Transpiles into:

`css
BAR {}
@media fooBAR {
foo-BAR-baz: qux;
}
`

$3

- postcss-simple-vars
- postcss-advanced-vars

Installation

`
$ npm install postcss-nested-vars
`

Usage

$3

`js
postcss([ require('postcss-nested-vars')(/ options /) ]);
`

$3

`ts
import * as postcssNestedVars from 'postcss-nested-vars';

postcss([ postcssNestedVars(/ options /) ]);
`

Options

$3

Type: Object

Required: false

Default: {}

Global variables that can be referenced from any context.

$3

Type: string:

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.

$3

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.