https://github.com/awcross/postcss-each-variables

PostCSS plugin enabling variable mapping for each
https://github.com/awcross/postcss-each-variables

each postcss postcss-plugin properties rules variables vars

Last synced: about 1 month ago
JSON representation

PostCSS plugin enabling variable mapping for each

• Host: GitHub
• URL: https://github.com/awcross/postcss-each-variables
• Owner: awcross
• License: mit
• Created: 2017-11-16T22:54:06.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-11-28T06:54:36.000Z (about 7 years ago)
• Last Synced: 2024-11-14T18:08:43.793Z (about 1 month ago)
• Topics: each, postcss, postcss-plugin, properties, rules, variables, vars
• Language: JavaScript
• Homepage:
• Size: 7.81 KB
• Stars: 12
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md
  • Changelog: changelog.md
  • License: license

Awesome Lists containing this project

README

        
# postcss-each-variables [![Build Status](https://travis-ci.org/awcross/postcss-each-variables.svg?branch=master)](https://travis-ci.org/awcross/postcss-each-variables)

[PostCSS](https://github.com/postcss/postcss) plugin enabling variable mapping for `@each`.

## Install

```js

npm install --save-dev postcss-each-variables

```

## Usage

```js

postcss([ require('postcss-each-variables') ])

```

Note: you must include postcss-each-variables before other at-rules plugins.

### Before

```css

:root {

	--breakpoints: (

		sm: 576px,

		md: 768px,

		lg: 992px,

		xl: 1200px

	);

}

@each $key, $value in var(--breakpoints) {

	.container-$(key) {

		max-width: $(value);

	}

}

```

### After

```css

:root {

	--breakpoints: (

		sm: 576px,

		md: 768px,

		lg: 992px,

		xl: 1200px

	);

}

@each $key, $value in (sm, md, lg, xl), (576px, 768px, 992px, 1200px) {

	.container-$(key) {

		max-width: $(value);

	}

}

```

See [PostCSS](https://github.com/postcss/postcss) docs for examples for your environment.