Sass

Oznacza „Syntaktycznie niesamowite arkusze stylów”. Sass jest rozszerzeniem kaskadowe arkusze stylów (CSS), język używany do definiowania układu i formatowania HTML dokumenty. Wykorzystuje w pełni kompatybilny CSS składnia, ale zapewnia dodatkowe funkcje, takie jak zmienne CSS i zagnieżdżone reguły, które sprawiają, że CSS jest wydajniejszy i łatwiejszy do edycji.

Jedną z wad standardowego CSS jest to, że nie obsługuje zmienne. Na przykład, jeśli masz wiele stylów o tym samym kolorze, musisz zdefiniować kolor oddzielnie dla każdego stylu. Jeśli zdecydujesz się zmienić kolor, musisz zmienić go dla każdej instancji w dokumencie CSS. Dzięki Sassowi możesz zdefiniować kolor jako zmienną i przypisać zmienną do każdego stylu, który jej używa. Decydując się na zmianę koloru wystarczy zmienić go tylko raz - tam, gdzie jest wstępnie 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ż zagnieżdżone reguły, umożliwiając programistom pisanie bardziej wydajnego kodu. W poniższym przykładzie .przycisk klasa jest zagnieżdżona w #top p styl.

#top p
{
kolor: # 004D40;

.przycisk
{
kolor tła: # 039BE5;
kolor: #FFF;
}
}

Gdy skompilowany, powyższy kod wygeneruje następujący kod CSS:

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

Chociaż Sass zapewnia kilka korzyści autorzy strony, 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 WWW za pomocą programu takiego jak Compass.app or Koala. Można go również skompilować na serwerze przy użyciu pliku PHP or Rubin skrypt, który kompiluje Sass do CSS.