Sass 101 - A newb's guide: Operations range of numbers w/silent placeholders

operation_range_numbers_silent_placeholders.md

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.

SassMeister Gist

operation_range_numbers_silent_placeholders.scss

// Stipe v0.0.5.7.4
$cols: 12;

@for $i from 1 through $cols {
  %grid_#{$i}of#{$cols} {
    @include grid($i, $grid_context: $cols);
  }
}

.box {
  @extend %grid_6of12;
}