postcss-for-variables

PostCss plugin to use CSS Custom Properties in at-rule @for

Usage no npm install needed!

<script type="module">
  import postcssForVariables from 'https://cdn.skypack.dev/postcss-for-variables';
</script>

README

PostCSS For Plugin

Used in conjunction with the plugin postcss-for

Build Statusnpm versionnpm downloadsnpm

DEPRECATED, use postcss-at-rules-variables

/* Input example */
:root {
    --from: 1;
    --to: 3
}
@for $i from var(--from) to var(--to) {
    .icon-$i { ... }
}

/* Output example */
:root {
    --from: 1;
    --to: 3
}

.icon-1 { ... }
.icon-2 { ... }
.icon-3 { ... }

Usage

Use postcss-for-variables before postcss-for

postcss([ require('postcss-for-variables'), require('postcss-for') ])

See PostCSS docs for examples for your environment.