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 (29)

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