Have ideas to improve npm?Join in the discussion! »

    postcss-each

    1.0.0 • Public • Published

    postcss-each

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

    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.

    Install

    npm i postcss-each

    DownloadsWeekly Downloads

    15,090

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    137 MB

    Total Files

    10

    Last publish

    Collaborators

    • avatar