postcss-each-variables

PostCSS plugin enabling variable mapping for @each.

Install

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

Usage

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

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

Before

:root {
	--breakpoints: (
		sm: 576px,
		md: 768px,
		lg: 992px,
		xl: 1200px
	);
}

@each $key, $value in var(--breakpoints) {
	.container-$(key) {
		max-width: $(value);
	}
}

After

: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 docs for examples for your environment.