Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Sass 101 - A newb's guide: Operations range of numbers w/silent placeholders

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

// 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment