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>
.
The following illustrates how you can use placeholder selectors to create a series of options that don't process into CSS until extended into another selector.
$cols: 12;
@for $i from 1 through $cols {
%grid_#{$i}of#{$cols} {
@include grid($i, $grid_context: $cols);
}
}
.box {
@extend %grid_6of12;
}
Note: The grid
mixin is being leveraged from the Stipe Compass extension for illustration of this exercise.