Used in conjunction with the plugin postcss-each, postcss-conditionals, postcss-for and more at-rules plugins.
/* input.css */
:root {
--array: foo, bar, baz;
--from: 1;
--to: 3;
--icon-exclude: 2;
--color-danger: red;
}
@each $val in var(--array) {
@import "$val.css";
}/* foo.css */
html {
background-color: var(--color-danger);
}/* bar.css */
.some-class {
color: #fff;
@for $val from var(--from) to var(--to) {
@if $val != var(--icon-exclude) {
.icon-$val {
background-position: 0 $(val)px;
}
}
}
}/* baz.css */
h1 {
font-size: 24px;
}
@import "biz.css";/* biz.css */
h2 {
color: olive;
}/* Output example */
html {
background-color: red;
}
.some-class {
color: #fff;
.icon-1 {
background-position: 0 1px;
}
.icon-3 {
background-position: 0 3px;
}
}
h1 {
font-size: 24px;
}
h2 {
color: olive;
}$ npm install postcss-at-rules-variablesUse postcss-at-rules-variables before you at-rules plugin
// dependencies
var fs = require("fs");
var postcss = require("postcss");
var atImport = require("postcss-import");
var atEach = require("postcss-each");
var atVariables = require("postcss-at-rules-variables");
var atIf = require('postcss-conditionals');
var atFor = require('postcss-for');
var customProperties = require("postcss-custom-properties");
// css to be processed
var css = fs.readFileSync("css/input.css", "utf8");
// process css
var output = postcss()
.use(atVariables({ /* options */ }))
.use(atEach())
.use(atImport({
plugins: [
require("postcss-at-rules-variables")({ /* options */ }),
require("postcss-import"),
]
}))
.use(atFor())
.use(atIf())
.use(customProperties())
.process(css, {
from: "css/input.css"
})
.css;
console.log(output);Type: Array
Default: ['for', 'if', 'else', 'each']
See PostCSS docs for examples for your environment.