PostCSS Simple Variables
PostCSS plugin for Sass-like variables.
You can use variables inside values, selectors and at-rule 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.
Look at postcss-map for big complicated configs.
Docs
Read full docs on GitHub.