node package manager

postcss-advanced-variables

Advanced Variables Build Status

Advanced Variables converts Sass-like variables and conditionals into CSS.

/* before */
 
$dir: assets/icons;
 
@each $icon in (foo, bar, baz) {
    .icon-$icon {
        background: url('$dir/$icon.png');
    }
}
 
@for $index from 1 to 5 by 2 {
    .col-$index {
        width: $(index)0%;
    }
}
 
/* after */
 
.icon-foo {
    background: url('assets/icons/foo.png');
}
 
.icon-bar {
    background: url('assets/icons/bar.png');
}
 
.icon-baz {
    background: url('assets/icons/baz.png');
}
 
.col-1 {
    width: 10%;
}
 
.col-3 {
    width: 30%;
}
 
.col-5 {
    width: 50%;
}

Usage

Add Advanced Variables to your build tool:

npm install postcss-advanced-variables --save-dev

Node

require('postcss-advanced-variables')({ /* options */ }).process(YOUR_CSS);

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Load Advanced Variables as a PostCSS plugin:

postcss([
    require('postcss-advanced-variables')({ /* options */ })
]);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Enable Advanced Variables within your Gulpfile:

var postcss = require('gulp-postcss');
 
gulp.task('css', function () {
    return gulp.src('./css/src/*.css').pipe(
        postcss([
            require('postcss-advanced-variables')({ /* options */ })
        ])
    ).pipe(
        gulp.dest('./css')
    );
});

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Enable Advanced Variables within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');
 
grunt.initConfig({
    postcss: {
        options: {
            processors: [
                require('postcss-advanced-variables')({ /* options */ })
            ]
        },
        dist: {
            src: 'css/*.css'
        }
    }
});

Options

variables

Type: Object
Default: {}

Specifies your own global variables.

require('postcss-advanced-variables')({
    variables: {
        'site-width': '960px'
    }
});
/* before */
 
.hero {
    max-width: $site-width;
}
 
/* after */
 
.hero {
    max-width: 960px;
}

Unleash awesomeness

Private packages, team management tools, and powerful integrations. Get started with npm Orgs

how? learn more

Collaborators list

Stats

Try it out

Keywords

postcss, css, postcss-plugin, sass, scss, variables, conditionals, iterators, fors, eaches, medias, defaults

Dependencies (1)

postcss

Dependents (27)

vxapp, frack-postcss, edgecss, postcss-blue-plugins, sc5-styleguide, precss, cssbag, @everledger/js-toolchain, msops-css, sourcejs-react-styleguidist, torch-css, postcss-sassy, reduce-css-postcss, modern-spa-boilerplate, my-grid-system, feds-cli, nathanjosiah-sc5-styleguide, @stayradiated/pkg, advanced-boilerplate, babel-plugin-prejss, reacteek, ycss, edge-postcss, and more