A PostCSS plugin to iterate through values.
Inspired and based on postcss-each.
Support usage postcss-simple-vars before this plugin and sass-like @each
;
Iterate through values:
@each icon in foo, bar, baz {
.icon-#(icon) {
background: url('icons/#(icon).png');
}
}
.icon-foo {
background: url('icons/foo.png');
}
.icon-bar {
background: url('icons/bar.png');
}
.icon-baz {
background: url('icons/baz.png');
}
Iterate through values with index (auto add index
variable):
@each val in foo, bar {
.icon-#(val) {
background: url("#(val)_#(index).png");
}
}
.icon-foo {
background: url("foo_0.png");
}
.icon-bar {
background: url("bar_1.png");
}
Iterate through lists with multiple variables delimited with colon:
@each animal, color in (puma: black, sea-slug: blue) {
.#(animal)-icon {
background-image: url('/images/$(animal).png');
border: 2px solid #(color);
}
}
.puma-icon {
background-image: url('/images/puma.png');
border: 2px solid black;
}
.sea-slug-icon {
background-image: url('/images/sea-slug.png');
border: 2px solid blue;
}
postcss([ require('postcss-sass-each') ])
Type: object
Default: {}
Accepts two properties: afterEach
and beforeEach
Type: array
Default: []
Plugins to be called after each iteration
Type: array
Default: []
Plugins to be called before each iteration
require('postcss-sass-each')({
plugins: {
afterEach: [
require('postcss-at-rules-variables')
],
beforeEach: [
require('postcss-custom-properties')
]
}
})
See PostCSS docs for examples for your environment.