Name: postcss-simple-vars
Owner: PostCSS
Description: PostCSS plugin for Sass-like variables
Created: 2015-01-31 13:55:45.0
Updated: 2018-05-23 13:30:18.0
Pushed: 2018-05-13 04:17:51.0
Size: 158
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
<img align=“right” width=“95” height=“95”
title="Philosopher?s stone, logo of PostCSS"
src="http://postcss.github.io/postcss/logo.svg">
PostCSS plugin for Sass-like variables.
You can use variables inside values, selectors and at-rule?s parameters.
: top;
e: #056ef0;
umn: 200px;
u_link {
background: $blue;
width: $column;
u {
width: calc(4 * $column);
margin-$(dir): 10px;
ss
u_link {
background: #056ef0;
width: 200px;
u {
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.
There is special syntax if you want to use variable inside CSS words:
fix: my-company-widget
fix { }
efix)_button { }
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:
th: 100px;
width: <<$(width)>> */
compiles to:
width: 100px */
If you want to escape $
in content
property, use Unicode escape syntax.
::before {
content: "\0024x";
css([ require('postcss-simple-vars') ])
See PostCSS docs for examples for your environment.
Call plugin function to set options:
e(postcss([ require('postcss-simple-vars')({ silent: true }) ]))
variables
Set default variables. It is useful to store colors or other constants in common file:
onfig/colors.js
le.exports = {
blue: '#056ef0'
ulpfile.js
colors = require('./config/colors');
vars = require('postcss-simple-vars')
.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:
css([
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.
css([
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.
css([
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.
This plugin passes result.messages
for each variable:
css([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
.