Control Directives

Code

$columns: 12;

// @for loops
@for $i from 1 through $columns {
  .col-#{$i} { width: percentage($i / $columns); }
}

// @each over a list or map
$icons: user heart cart;
@each $name in $icons {
  .icon-#{$name} { background-image: url("/img/#{$name}.png"); }
}

// @if / @else
@mixin size($value) {
  @if $value == large  { font-size: 20px; }
  @else if $value == small { font-size: 12px; }
  @else { font-size: 16px; }
}

Explanation

Control directives make Sass programmable. @for generates numbered classes like a grid system, @each iterates lists or maps for repeated patterns, and @if/@else branches logic. These remove tedious repetition while keeping the output static and predictable.

More Sass Snippets