postcss-each-variables

0.3.0 • Public • Published

postcss-each-variables Build Status

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.

Package Sidebar

Install

npm i postcss-each-variables

Weekly Downloads

182

Version

0.3.0

License

MIT

Last publish

Collaborators

  • awcross