Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including postcss-nested-vars with all npm packages installed. Try it out:

var postcssNestedVars = require("postcss-nested-vars")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

postcss-nested-vars v1.0.0

PostCSS plugin for nested variables.

postcss-nested-vars

NPM version npm license Travis Build Status codecov Dependency 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 */) ]);

TypeScript

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

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

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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free