Sass (Syntactically Awesome Style Sheets) to preprocesor CSS, który rozszerza język o zmienne, zagnieżdżanie reguł, mixiny i funkcje. Kod Sass jest kompilowany do zwykłego CSS.
Co dodaje Sass do CSS?
- zmienne, np.
$kolor: #0a58ca;, - zagnieżdżanie selektorów,
- mixiny, czyli wielokrotnego użytku bloki stylów,
- podział na pliki i ich importowanie.
Sass a nowoczesny CSS
Dziś sam CSS obsługuje zmienne (custom properties) i zagnieżdżanie, więc część powodów użycia Sass zniknęła. Nadal bywa wygodny w dużych projektach.
Jak używać Sass?
Pisze się w plikach .scss, a kompilator zamienia je na .css. Zwykle odbywa się to w procesie budowania, np. przez Vite lub Webpack.
Sass a Tailwind i CSS nowej generacji
W projektach opartych na narzędziach typu Tailwind lub zwykłym CSS z custom properties Sass bywa zbędny. Nadal sprawdza się w dużych bibliotekach stylów, gdzie przydają się funkcje, pętle i mixiny, oraz w starszych projektach, np. opartych na Bootstrapie. Zwróć uwagę na składnię: nowoczesny Sass korzysta z modułów (@use), a starszy @import jest wycofywany.
Zobacz w praktyce
Refaktoryzacja CSS – jak usunąć 80% nieużywanego kodu i przyspieszyć renderowanie (FCP) 
Jak zaciemnić kod JavaScript i kiedy to ma sens 
Działanie strony internetowej w przeglądarce