Co to jest SASS?

SASS jest to preprocesor CSS pozwalający tworzyć arkusze stylów szybciej i dużo czytelniej. Plik zawierający kod SASS zapisywany jest z rozszerzeniem .sass bądź .scss i wzbogaca napisanie arkuszy stylów o dodatkowe funkcje takie jak zmienne, albo obliczenia. Dzięki temu pozwala skupić się na najważniejszych aspektach pracy, czyli tworzeniu. Wszystko kompilowane jest na lokalnym komputerze developera do postaci CSS’a gotowego do podpięcia na stronę. Dzięki wielostopniowym zagnieżdżaniu się elementów, wstawiania fragmentów kodu za pomocą funkcji mixin i wielu innych przydatnych funkcjonalności w SASS, nie musimy ciągle powielać swojego kawałka kodu. Przypisując te same klasy i style tracimy przecież czas, oraz czytelność.

Kod SASS:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

body {
    font: 100% $font-stack;
    color: $primary-color;
    a {
        border: 1px solid black;
        text-decoration: none;
        @include border-radius(10px);
    }
}

Kod SASS skompilowany do CSS:

body {
    font: 100% Helvetica, sans-serif;
    color: #333;
}
body a {
    border: 1px solid black;
    text-decoration: none;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}