Package Exports

postcss-simple-vars

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-simple-vars) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

See PostCSS docs for source map options and other special cases.

Grunt

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

grunt.loadNpmTasks('grunt-postcss');

Gulp

var postcss = require('gulp-postcss');

gulp.task('css', function () {
     return gulp.src('./src/*.css')
        .pipe(postcss([ require('postcss-simple-vars') ]))
        .pipe(gulp.dest('./dest'));
});

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'));
});

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