postcss-simple-vars
PostCSS plugin for Sass-like variables
Last updated a year ago by ai .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install postcss-simple-vars 
SYNC missed versions from official npm registry.

PostCSS Simple Variables Build Status

PostCSS plugin for Sass-like variables.

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

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

.menu_link {
    background: $blue;
    width: $column;
}
.menu {
    width: calc(4 * $column);
    margin-$(dir): 10px;
}
.menu_link {
    background: #056ef0;
    width: 200px;
}
.menu {
    width: calc(4 * 200px);
    margin-top: 10px;
}

If you want be closer to W3C spec, you should use postcss-custom-properties and postcss-at-rules-variables plugins.

Also you should look at postcss-map for big complicated configs.

Interpolation

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

$prefix: my-company-widget

$prefix { }
$(prefix)_button { }

Comments

You could use variables in comments too (for example, to generate special mdcss comments). But syntax for comment variables is different to separate them from PreCSS code examples:

$width: 100px;
/* $width: <<$(width)>> */

compiles to:

/* $width: 100px */

Escaping

If you want to escape $ in content property, use Unicode escape syntax.

.foo::before {
    content: "\0024x";
}

Usage

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

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

onVariables

Callback invoked once all variables in css are known. The callback receives an object representing the known variables, including those explicitly-declared by the variables option.

postcss([
    vars({
        onVariables: function (variables) {
            console.log('CSS Variables');
            console.log(JSON.stringify(variables, null, 2));
        }
    })
])

unknown

Callback on unknown variable name. It receives node instance, variable name and PostCSS Result object.

postcss([
    vars({
        unknown: function (node, name, result) {
            node.warn(result, 'Unknown variable ' + name);
        }
    })
])

silent

Left unknown variables in CSS and do not throw an 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.

keep

Keep variables as is and not delete them. Default is false.

Messages

This plugin passes result.messages for each variable:

postcss([vars]).process('$one: 1; $two: 2').then(function (result) {
    console.log(result.messages)
})

will output:

[
    {
        plugin: 'postcss-simple-vars',
        type: 'variable',
        name: 'one'
        value: '1'
    },
    {
        plugin: 'postcss-simple-vars',
        type: 'variable',
        name: 'two'
        value: '2'
    }
]

You can get access to this variables in result.messages also in any plugin goes after postcss-simple-vars.

Current Tags

  • 5.0.2                                ...           latest (a year ago)

19 Versions

  • 5.0.2                                ...           a year ago
  • 5.0.1                                ...           2 years ago
  • 5.0.0                                ...           2 years ago
  • 4.1.0                                ...           3 years ago
  • 4.0.0                                ...           3 years ago
  • 3.1.0                                ...           3 years ago
  • 3.0.0                                ...           4 years ago
  • 2.0.0                                ...           4 years ago
  • 1.2.0                                ...           5 years ago
  • 1.1.0                                ...           5 years ago
  • 1.0.1                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
  • 0.3.0                                ...           5 years ago
  • 0.2.4                                ...           5 years ago
  • 0.2.3                                ...           5 years ago
  • 0.2.2                                ...           5 years ago
  • 0.2.1                                ...           5 years ago
  • 0.2.0                                ...           5 years ago
  • 0.1.0                                ...           5 years ago
Maintainers (1)
Downloads
Today 30
This Week 1,484
This Month 575
Last Day 545
Last Week 1,982
Last Month 10,412
Dependencies (1)
Dev Dependencies (0)
None
Dependents (229)

Copyright 2014 - 2016 © taobao.org |