Control Directives

$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; }
}