PostCSS plugin for less-like variables.
You can use variables inside values, selectors and at-rule’s parameters.
@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;
}
If you want be closer to W3C spec, you should use postcss-custom-properties plugin.
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 { }
Usage
postcss([ require('postcss-less-vars') ])
See PostCSS docs for examples for your environment.
Options
Call plugin function to set options:
postcss([
require('postcss-less-vars')({
variables: {
color: '#fff',
height: '40rem'
}
})
])
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-less-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');
}
})
]
only
Set value only for variables from this object. Other variables will not be changed. It is useful for PostCSS plugin developers.