postcss-each
A PostCSS plugin to iterate through values.
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:
@each $val, $i in foo, bar {
.icon-$(val) {
background: url("$(val)_$(i).png");
}
}.icon-foo {
background: url("foo_0.png");
}
.icon-bar {
background: url("bar_1.png");
}Iterate through multiple variables:
@each $animal, $color in (puma, sea-slug), (black, 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;
}Installation
npm install --save-dev postcss postcss-each
Usage
postcss([ require('postcss-each') ])Options
plugins
Type: object
Default: {}
Accepts two properties: afterEach and beforeEach
afterEach
Type: array
Default: []
Plugins to be called after each iteration
beforeEach
Type: array
Default: []
Plugins to be called before each iteration
require('postcss-each')({
plugins: {
afterEach: [
require('postcss-at-rules-variables')
],
beforeEach: [
require('postcss-custom-properties')
]
}
})See PostCSS docs for examples for your environment.