Sass (Syntactically Awesome Style Sheets)

Sass (ang. Syntactically Awesome Style Sheets) jest najpopularniejszym preprocesorem arkuszy stylów CSS. Umożliwia rozszerzenie możliwości tradycyjnego CSS o zmienne, zagnieżdżone reguły, dziedziczenie, funkcje oraz modularną budowę kodu, co znacząco usprawnia proces tworzenia i utrzymania dużych projektów internetowych.

Historia

Sass został stworzony w 2006 roku przez Hampton Catlin oraz Nathana Burbę jako projekt open source napędzany językiem Ruby. Pierwsza wersja pojawiła się pod nazwą „Sass” i była dostępna jako biblioteka Ruby‑gem. W 2009 roku wprowadzono składnię SCSS, będącą pełną kompatybilnością z istniejącym CSS, co przyczyniło się do jeszcze większej popularności języka.

Składnia

Sass oferuje dwie formy składni:

• Sass – składnia z wcięciami (indentation), bez znaków {} i ;. Przykład:

  
  $primary-color: #333
  
  .body
    color: $primary-color
    font:
      family: Helvetica, sans-serif
      size: 16px
        

• SCSS – składnia zgodna z CSS, wykorzystująca klamry i średniki. Przykład:

  
  $primary-color: #333;
  
  .body {
    color: $primary-color;
    font-family: Helvetica, sans-serif;
    font-size: 16px;
  }
        

Podstawowe elementy języka

Do najważniejszych mechanizmów Sass należą:

• Zmienne – pozwalają przechowywać wartości takie jak kolory czy rozmiary:

$base-spacing: 1rem;

• Zagnieżdżanie – reguły można definiować wewnątrz innych selektorów, co odzwierciedla strukturę DOM.
• Mixin-y – fragmenty kodu, które można wielokrotnie wywoływać z dowolnymi argumentami:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.box { @include border-radius(5px); }

• Rozszerzanie (inheritance) – @extend – umożliwia współdzielenie zestawu deklaracji pomiędzy selektorami.
• Funkcje – wbudowane (np. lighten(), darken()) oraz własne, definiowane przez użytkownika.

Wersje i implementacje

Poza oryginalnym gemem Ruby, istnieją liczne implementacje Sass w innych językach i środowiskach:

• Node.js – node-sass (oparty na libsass) oraz sass (dart‑sass), najczęściej używany w nowoczesnych toolchainach Webpack i Gulp.
• Dart – dart-sass, oficjalny kompilator zalecany przez twórców projektu.
• C/C++ – libsass, biblioteką o wysokiej wydajności, używaną m.in. w node-sass.

Zastosowanie

Sass jest wykorzystywany w praktycznie każdym większym projekcie front‑endowym. Przykładowe obszary:

• Frameworki CSS, takie jak Bootstrap (od wersji 4) i Foundation, bazują na SCSS.
• Systemy zarządzania treścią (WordPress, Drupal) korzystają z Sass w motywach i wtyczkach.
• Budowanie aplikacji jednopostaciowych (React, Vue.js) – Sass jest często integrowany z bundlerami.
• Responsive Web Design – dzięki zmiennym i mixinom można łatwo definiować break‑pointy i media queries.

Porównanie z innymi preprocesorami

Cecha	Sass/SCSS	Less	Stylus
Składnia	Indentacja lub SCSS (kompatybilny z CSS)	SCSS‑jakowa, wymaga średników	Wolna, pozwala na pomijanie średników i nawiasów
Wsparcie dla funkcji	Rozbudowane (wbudowane + własne)	Podstawowe	Najbardziej elastyczne (dowolna JavaScript‑owa logika)
Ekosystem	Największy – duża liczba bibliotek i frameworków	Średni	Mniejszy, bardziej niszowy

Przykładowy proces kompilacji

Poniżej opisano prosty sposób kompilacji pliku style.scss przy użyciu dart-sass w środowisku Node.js:

npm install -g sass
sass style.scss style.css --watch

Polecenie --watch sprawia, że kompilator nasłuchuje zmian w pliku źródłowym i automatycznie generuje aktualny CSS.

Powiązane pojęcia

Preprocesor CSS | CSS | HTML | Responsive Web Design | Bootstrap | Webpack | Gulp | Ruby | Dart

Bibliografia

1. Hampton Catlin i Nathan Burbank, „Sass 3.5 Documentation”, 2023.
2. W3C, „Cascading Style Sheets (CSS)”, dostępny w zasobach CSS.
3. Mark Otto, Jacob Thornton, „Bootstrap Documentation”, 2022.