CSS

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 bądź 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

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: = and +

SCSS:

  • w pełni kompatybilny 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)

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.

Artykuły, które mogą Ci się spodobać...

Wpisz hasło, którego szukasz i naciśnij ENTER, aby je wyszukać. Naciśnij ESC, aby anulować.

Dawaj na górę