Zmienne pomogą zachować czytelność kodu oraz umożliwią łatwą ich zmianę w przyszłości. Najprostszym przykładem użycia zmiennych jest deklaracja w projekcie dominujących kolorów. Jeżeli pojawi się potrzeba ich zmiany, zrobimy to w jednym miejscu, gdy w normalnym CSS zmuszeni byliśmy szukać kolorów w wielu miejscach.

W Sass deklarację poprzedza znak $: $linkColor: #f9425e;

Przykładowa deklaracja zmiennych:

$main-color: #ff0000;
$head-width: 1200px;
$text-color: $main-color;
$txt-font: Arial, Verdana, sans-serif;

Użycie:

p {
  color: $main-color;
  width: $head-width;
}

Mixiny, są całymi fragmentami kodu, które mogą być wielokrotnie powielane. Najprostszym przykładem mixiny jest:

@mixin my-header {
       Color: #fff;
       Margin-top: 15px;
       Margin-bottom: 15px; 
}

Użycie:

#main {
       @include my-header;
       Background-color: orange;  
}

Innym bardziej skomplikowanym przykładem jest możliwość użycia argumentów w deklaracji mixin jak również wartości domyślnych dla nich:

@mixin transition($prop: all, $speed: 0.2s, $easing: linear) {
       -webkit-transition: $prop $speed $easing;
       -moz-transition: $prop $speed $easing;
       -o-transition: $prop $speed $easing;
       -ms-transition: $prop $speed $easing;
       transition: $prop $speed $easing;
}

Użycie:

img { 
    @include transition($easing: ease-out); 
}

W przypadku takiego użycia, jeżeli nie zostaną podane parametry wywołania to przybiorą one domyślne wartości czyli: ($prop: all, $speed: 0.2s, $easing: linear). Można jednak przy wywołaniu zmienić każdy z tych parametrów lub jedynie wybrany jak widać w powyższym przykładzie użycia.

Kolejną bardzo użyteczną możliwością SASS / SCSS jest zagnieżdżanie selektorów. Dzięki takiemu podejściu po raz kolejny kod stanie się bardziej przejrzysty. Również zaoszczędzone zostanie powielanie nazwy danego elementu dzięki użyciu ‘&’. Wszystko co dotyczy danego elementu oraz jego potomków zgodnych z drzewem DOM pojawi się w jednym miejscu.

Podstawowe zagnieżdżenie to płytkie odwzorowanie struktury HTML:

body {
      div { 
         color: red; 
      }
}

Oprócz standardowego zagnieżdżania, można użyć &, który stanowi powielenie rodzica np.:

body {
      &:hover { 
         color: blue; 
      }
}

Oznacza to, że przypisujemy do elementu body w stanie hover kolor czcionki niebieski.

Dziedziczenie odgrywa podobną rolę do mixinów. Tutaj również pobieramy gotowe style z jednego elementu i używamy je na innym elemencie wzbogacając całość dodatkowymi stylami. W celu skorzystania z dziedziczenia należy użyć słowa kluczowego @extend. W poniższym przykładzie dwie klasy dziedziczą style z klasy button:

.button {
    border: 1px solid #ccc;
    padding: 10px;
    border-bottom-style: dotted;
}
.redbutton {
    @extend .button;
    color: red;
}
.greenbutton {
    @extend .button;
    color: green;
}

darken(color, wartość %) – wskazany kolor zostanie przyciemniony o wskazaną wartość

buton:hover: {
      background-color: darken(#ff9393, 50%); 
}

Lighten(color, wartość %) – wskazany kolor zostanie rozjaśniony o wskazaną wartość

percentage(wartość x.x) – zamienia ułamek na procent np. percentage(0.2) => 20%

Dużo więcej funkcji znaleźć można w dokumentacji na stronie sass-lang. Gdyby to było ciągle mało istnieje możliwość deklaracji własnych funkcji poprzez:

@function f-name($arg) {  
     @return val-return;  
}

Zanim zabierzesz się do pisania własnych funkcji warto popatrzeć na bibliotekę Compass. Można tam znaleźć sporo interesujących gotowców: http://compass-style.org/reference/compass/css3/ – wybierz najpierw górną belkę: Browser Support CSS3 Helpers Layout Reset Typography Utilities, a następnie konkretne style z bocznej belki (z lewej strony).

Zapraszam do kolejnego artykułu, którym skończę temat SASS / SCSS. Poruszone będą tam zagadnienia: modułowość, warunki, pętle.