1.1.0 • Published 3 years ago
postcss-each v1.1.0
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.
1.1.0
3 years ago
1.0.0
3 years ago
0.10.0
7 years ago
0.9.3
8 years ago
0.9.2
8 years ago
0.9.1
8 years ago
0.9.0
8 years ago
0.8.0
8 years ago
0.7.2
8 years ago
0.7.1
8 years ago
0.7.0
9 years ago
0.6.0
9 years ago
0.5.0
9 years ago
0.4.1
9 years ago
0.4.0
9 years ago
0.3.1
9 years ago
0.3.0
9 years ago
0.2.1
9 years ago
0.2.0
9 years ago
0.1.0
9 years ago