Z czym się je Sass, SASS i SCSS?

Na początku nauki „sassów” spotkałam się z ogromną niekonsekwencją w używaniu dwóch pojęć: SASS i SCSS. Chciałabym troszkę usystematyzować zebrane informacje o tych wyrazach, co one dokładnie oznaczają i kiedy można z nich korzystać.

Każdy pewnie kojarzy te pojęcia z hasłem „preprocesory CSS”. Nie będę w tym artykule rozpisywać się o tym, czym jest preprocesor CSS, jakie daje możliwości, czy lepszy jest Sass, LESS, czy może Stylus. To nie jest tematem tego artykułu, a zresztą takie informacje znajdziecie łatwo w Internecie. W każdym razie na pytanie, czym jest Sass, większość odpowie „taki preprocesor CSS”. I dobrze. Ale nie do końca.

Sass

Sass (Syntactically Awesome Stylesheets) – posiada dwie definicje:

• Sass – nazwa preprocesora CSS, narzędzia, dzięki któremu piszemy kod podobny do zwykłego CSS, jednak z wieloma ulepszeniami, a który na końcu jest kompilowany do zwykłego formatu CSS; Sass umożliwia pisanie kodu w dwóch składniach – SASS lub SCSS.
• SASS lub sass jako nazwa rozszerzenia pliku, nazwa składni, jedno z rozwiązań dostępnych w preprocesorze Sass; to pierwsza składnia, jaka powstała od początków dziejów Sass

SCSS lub scss (Sassy CSS) – drugie rozwiązanie dostępne w preprocesorze Sass, druga składnia, z której można skorzystać, dostępna od wersji Sass 3

SASS vs. SCSS

Składnie SASS i SCSS nie różnią się zasadą działania, funkcjonalnością. JEDYNĄ różnicą między nimi jest…. składnia

SASS:

• składnia opiera się na indentacji zamiast nawiasach klamrowych, średnikach czy innych znakach interpunkcyjnych (wymusza to prawidłowe formatowanie, czysty kod)
• nie ma słownych instrukcji (takich jak @mixin, @include), pojedyncze znaki są wystarczające (=, +)

SCSS:

• w pełni kompatybilna ze składnią CSS (jeśli coś jest zgodne z CSSem, jest też zgodne z SCSSem, jeśli podmienimy rozszerzenie .css na .scss – wszystko będzie po prostu ok)
• składnia opiera się na nawiasach klamrowych, średnikach, słownych instrukcjach (takich jak @mixin,@include) i niewielu dodatków do samego CSSa (łatwiejszy do nauki i czytania)
• dostępna od wersji Sass 3

Przykład

Wszystkie poniższe rozwiązania są jednoznaczne.

SASS

 =border-radius($radius)
     -webkit-border-radius: $radius
     -moz-border-radius: $radius
     -ms-border-radius: $radius
     border-radius: $radius
 .box
     +border-radius(10px)
 

SCSS

@mixin border-radius($radius) {
     -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
     -ms-border-radius: $radius;
     border-radius: $radius;
}
.box {
     @include border-radius(10px);
}

CSS

 .box {
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     -ms-border-radius: 10px;
     border-radius: 10px;
 }

Jak już wspomniałam, obie składnie są ze sobą zgodne jeśli chodzi o funkcjonalność. Dlatego też pliki .sass i .scss mogą się nawzajem importować. Wybór składni zależy od autora kodu. Na koniec chciałabym polecić ciekawe porównanie obu rozwiązań: KLIK.