Sass 101 - A newb's guide: Operations range of numbers

operations_range_of_numbers.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>.

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.

SassMeister Gist

operations_range_of_numbers.scss

// Stipe v0.0.5.7.4

$cols: 2;

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

// Update line 5 from 'through' to 'to' to see the difference in the CSS output