Skip to content
PostCSS plugin to iterate through values
JavaScript CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.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
.travis.yml
CHANGELOG.md Update changelog May 20, 2017
LICENSE
README.md Merge PR #16 Feb 5, 2016
index.js Fix Bug: the correct order of nodes when repeating Feb 16, 2016
package.json

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.

You can’t perform that action at this time.