For Plugin
PostCSS (fork of)PostCSS plugin that enables @for
loop syntax in your CSS.
Install
npm install -g postcss-for-var
Usage
Note, that unlike the Sass @for
, postcss-for in the example below iterates from 1 to 3 inclusively.
$from: 1;$to: 3;@for @i from $from to $to .b-@i width: calc@i / $to * 100%;
the above solution assumes you're using postcss-simple-vars and postcss-calc
This plugin must be set after postcss-nested and postcss-simple-vars but before postcss-calc.
By
keyword is available:
@@}
See PostCSS docs for examples for your environment.