Sass

Skrót od „Syntactically Awesome Style Sheets”. Sass to rozszerzenie kaskadowych arkuszy stylów (CSS), języka używanego do definiowania układu i formatowania dokumentów HTML. Używa w pełni zgodnej z CSS składni, ale zapewnia dodatkowe funkcje, takie jak zmienne CSS i reguły zagnieżdżone, które sprawiają, że CSS jest wydajniejszy i łatwiejszy w edycji.

Jedną z wad standardowego CSS jest brak obsługi zmiennych. Jeśli na przykład masz wiele stylów w tym samym kolorze, musisz zdefiniować ten kolor osobno dla każdego stylu. Jeśli zdecydujesz się zmienić kolor, musisz zmienić go w każdym wystąpieniu w dokumencie CSS. W Sass możesz zdefiniować kolor jako zmienną i przypisać tę zmienną do każdego stylu, który jej używa. Jeśli zdecydujesz się zmienić kolor, wystarczy zmienić go tylko raz — w miejscu, w którym został początkowo zdefiniowany w dokumencie.

Poniższy przykład pokazuje, jak zdefiniować i używać zmiennej CSS w Sass.

  $myColor: #00695C;

  .pageTop { background-color: $myColor; }
  .infoText { color: $myColor; }
  .pageBottom { background-color: $myColor; }

Sass obsługuje również reguły zagnieżdżone, które pozwalają programistom pisać wydajniejszy kod. W poniższym przykładzie klasa .button jest zagnieżdżona w stylu #top p.

  #top p
  {
    color: #004D40;

    .button
    {
      background-color: #039BE5;
      color: #FFF;
    }
  }

Po skompilowaniu powyższy kod wygeneruje następujący CSS:

  #top p { color: #004D40; }
  #top p .button { background-color: #039BE5; color: #FFF; }

Sass zapewnia wiele korzyści twórcom stron internetowych, ale dokumenty Sass nie są rozpoznawane przez przeglądarki internetowe. Dlatego plik Sass musi najpierw zostać skompilowany do CSS, zanim zostanie użyty w dokumencie HTML. Można to zrobić lokalnie przed przesłaniem CSS na serwer internetowy za pomocą programu takiego jak Compass.app lub Koala. Plik można również skompilować na serwerze za pomocą skryptu PHP lub Ruby, który kompiluje Sass do CSS.