Sass – kodowanie

@ – symbol oznacza dyrektywę

# – symbol interpolacji by połączyć zmienną z wyświetlana wartości

http://krasimirtsonev.com/blog/article/SASS-mixins-extends-and-placeholders-differences-use-cases

// === THEME ===
// Allowed values: Dark, Light, Default
$theme: Dark;

// === COLORS ===
$text-color: #222222;
$body-background-color: #fff;
$theme-color: #170a48;
$secondary-color: #f27731;
$ternary-color: #ccf962;
$link-color: $secondary-color;
$menu-item-color: white;

@if $theme == Dark {
  $text-color: #fff;
  $body-background-color: #22222a;
  $theme-color: #42424a;
  $secondary-color: #c24721;
  $ternary-color: #698932;
  $link-color: $secondary-color;
  $menu-item-color: white;
} @else if $theme == Light {
  $text-color: #000;
  $body-background-color: #fff;
  $theme-color: #372a27;
  $secondary-color: #d26741;
  $ternary-color: #b9da63;
  $link-color: $secondary-color;
  $menu-item-color: white;
}

zmienne Defaultowe muszą być zadeklarowane jako pierwsze nie w ostatnim warunku @else {} bo inaczej sass przy kompilacji zwróci błąd że zmienne nie istnieją.

loop for – iterowanie po liczbach
z class .col-6

@for $i from 1 through 6
  .col-#{$i}
    width: $i * 2em

bez class .col-6

@for $i from 1 to 6
  .col-#{$i}
    width: $i * 2em

loop each – iterowanie po listach, elementach

Sass – kodowanie

#sass