Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/madyankin/postcss-each
PostCSS plugin to iterate through values
https://github.com/madyankin/postcss-each
css iteration postcss preprocessing
Last synced: about 1 month ago
JSON representation
PostCSS plugin to iterate through values
- Host: GitHub
- URL: https://github.com/madyankin/postcss-each
- Owner: madyankin
- License: mit
- Archived: true
- Created: 2015-05-18T05:43:18.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2021-06-30T09:41:03.000Z (over 3 years ago)
- Last Synced: 2024-10-12T23:15:10.948Z (2 months ago)
- Topics: css, iteration, postcss, preprocessing
- Language: JavaScript
- Size: 581 KB
- Stars: 93
- Watchers: 5
- Forks: 20
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-star - postcss-each
README
# postcss-each
A [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;
}
```
# Installation
```
npm install --save-dev postcss postcss-each
```
## Usage
```js
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
```javascript
require('postcss-each')({
plugins: {
afterEach: [
require('postcss-at-rules-variables')
],
beforeEach: [
require('postcss-custom-properties')
]
}
})
```
See [PostCSS] docs for examples for your environment.