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.

:root {
    --breakpoints: (
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px
    );
}
 
@each $key, $value in var(--breakpoints) {
    .container-$(key) {
        max-width: $(value);
    }
}

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