PostCSS plugin to iterate through values
JavaScript CSS
Clone or download
Latest commit 561c76e May 20, 2017
Permalink
Failed to load latest commit information.
test Update postcss May 20, 2017
.babelrc Update packages May 31, 2016
.editorconfig Add editorconfig Jul 10, 2015
.gitignore Use ES6, Luke Jul 12, 2015
.jscsrc Update packages May 31, 2016
.npmignore Update npmignore May 18, 2015
.travis.yml Remove node 4 support May 20, 2017
CHANGELOG.md Update changelog May 20, 2017
LICENSE Initial commi May 18, 2015
README.md Merge PR #16 Feb 5, 2016
index.js Fix Bug: the correct order of nodes when repeating Feb 16, 2016
package.json 0.10.0 May 20, 2017

README.md

postcss-each Build Status

A PostCSS plugin to iterate through values.

Sponsored by Evil Martians

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;
}

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.