PostCSS Simple Variables

PostCSS plugin for Sass-like variables.

You can use variables inside values, selectors and at-rule’s parameters.

If you want be closer to W3C spec, you should use postcss-custom-properties plugin.

$blue: #056ef0;
$column: 200px;

.menu {
    width: calc(4 * $column);
}
.menu_link {
    background: $blue;
    width: $column;
}

.menu {
    width: calc(4 * 200px);
}
.menu_link {
    background: #056ef0;
    width: 200px;
}

Interpolation

There is special syntax if you want to use variable inside CSS words:

$prefix: my-company-widget

$prefix { }
$(prefix)_button { }

Usage

Without options:

postcss([ require('postcss-simple-vars') ])

With options:

postcss([
    require('postcss-simple-vars')({ variables: require('./constants') })
])

See PostCSS docs for examples for your environment.

Options

Call plugin function to set options:

.pipe(postcss([ require('postcss-simple-vars')({ silent: true }) ]))

variables

Set default variables. It is useful to store colors or other constants in common file:

// config/colors.js

module.exports = {
    blue: '#056ef0'
}

// gulpfile.js

var colors = require('./config/colors');
var vars   = require('postcss-simple-vars')

gulp.task('css', function () {
     return gulp.src('./src/*.css')
        .pipe(postcss([ vars({ variables: colors }) ]))
        .pipe(gulp.dest('./dest'));
});

You can set a function returning object, if you want to update default variables in webpack hot reload:

postcss([
    vars({
        variables: function () {
            return require('./config/colors');
        }
    })
]

silent

Left unknown variables in CSS and do not throw a error. Default is false.

only

Set value only for variables from this object. Other variables will not be changed. It is useful for PostCSS plugin developers.