The @for
directive repeatedly outputs a set of styles. For each repetition, a counter variable is used to adjust the output. The directive has two forms: @for $var from <start> through <end>
and @for $var from <start> to <end>
.
Note the difference in the keywords through
and to
. $var
can be any variable name, like $i;
<start>
and <end>
are SassScript expressions that should return integers.
The @for
statement sets $var
to each successive number in the specified range and each time outputs the nested styles using that value of $var
. For the form from <start> through <end>
, the range includes the values of <start>
and <end>
, but the form from <start> to <end>
runs up to but not including the value of <end>
.
from <start> through <end>