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>
$cols: 2;
@for $i from 1 through $cols {
.grid_#{$i}of#{$cols} {
@include grid($i, $grid_context: $cols);
}
}
from <start> to <end>
$cols: 2;
@for $i from 1 to $cols {
.grid_#{$i}of#{$cols} {
@include grid($i, $grid_context: $cols);
}
}
Note: The grid
mixin is being leveraged from the Stipe Compass extension for illustration of this exercise.