PostCSS plugin for nested Sass-like variables.
TypeScript JavaScript Shell
Latest commit 502ea2c Sep 14, 2015 @jedmao v0.0.2
Permalink
Failed to load latest commit information.
.tasks v0.0.1 Sep 14, 2015
build v0.0.1 Sep 14, 2015
lib v0.0.1 Sep 14, 2015
scripts v0.0.1 Sep 14, 2015
test v0.0.1 Sep 14, 2015
typings v0.0.1 Sep 14, 2015
.d.ts v0.0.1 Sep 14, 2015
.editorconfig v0.0.1 Sep 14, 2015
.eslintrc v0.0.1 Sep 14, 2015
.gitattributes v0.0.1 Sep 14, 2015
.gitignore v0.0.1 Sep 14, 2015
.istanbul.yml v0.0.1 Sep 14, 2015
.npmignore v0.0.1 Sep 14, 2015
.travis.yml v0.0.1 Sep 14, 2015
CHANGELOG.md v0.0.2 Sep 14, 2015
LICENSE Initial commit Sep 13, 2015
README.md Change code coloring in readme Sep 14, 2015
appveyor.yml v0.0.1 Sep 14, 2015
gulpfile.babel.js v0.0.1 Sep 14, 2015
package.json v0.0.2 Sep 14, 2015
tsconfig.json v0.0.1 Sep 14, 2015
tsd.json v0.0.1 Sep 14, 2015
tslint.json v0.0.1 Sep 14, 2015

README.md

postcss-nested-vars

NPM version npm license Travis Build Status AppVeyor Build Status

npm

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

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

Transpiles into:

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:

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

Transpiles into:

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

Related Projects

Installation

$ npm install postcss-nested-vars

Usage

JavaScript

postcss([
    require('postcss-nested-vars')(/* options */),
    // more plugins...
])

TypeScript

///<reference path="node_modules/postcss-nested-vars/.d.ts" />
import postcssNestedVars from 'postcss-nested-vars';

postcss([
    postcssNestedVars(/* options */),
    // more plugins...
])

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 command:

$ npm run watch

This will build scripts, run tests and watch for changes.