PostCSS plugin to iterate through values
npm install postcss-eachA [PostCSS] plugin to iterate through values.
[PostCSS]: https://github.com/postcss/postcss
Iterate through values:
``css`
@each $icon in foo, bar, baz {
.icon-$(icon) {
background: url('icons/$(icon).png');
}
}
`css
.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:
`css`
@each $val, $i in foo, bar {
.icon-$(val) {
background: url("$(val)_$(i).png");
}
}
`css
.icon-foo {
background: url("foo_0.png");
}
.icon-bar {
background: url("bar_1.png");
}
`
Iterate through multiple variables:
`css`
@each $animal, $color in (puma, sea-slug), (black, blue) {
.$(animal)-icon {
background-image: url('/images/$(animal).png');
border: 2px solid $color;
}
}
`css`
.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;
}
`
npm install --save-dev postcss postcss-each
`js`
postcss([ require('postcss-each') ])
#### 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
`javascript``
require('postcss-each')({
plugins: {
afterEach: [
require('postcss-at-rules-variables')
],
beforeEach: [
require('postcss-custom-properties')
]
}
})
See [PostCSS] docs for examples for your environment.