https://github.com/madyankin/postcss-each

PostCSS plugin to iterate through values
https://github.com/madyankin/postcss-each

css iteration postcss preprocessing

Last synced: 9 days 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 (about 9 years ago)
• Default Branch: master
• Last Pushed: 2021-06-30T09:41:03.000Z (almost 3 years ago)
• Last Synced: 2024-06-18T13:56:45.316Z (10 days 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

Lists

• 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.