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.