SCSS

SCSS (Sassy CSS) to główna składnia preprocesora Sass, która rozszerza język CSS o możliwości znane z języków programowania. Kod SCSS nie jest bezpośrednio rozumiany przez przeglądarki — najpierw przechodzi przez proces kompilacji do zwykłego CSS, który dopiero trafia do użytkownika. Kluczową cechą SCSS jest pełna zgodność z CSS: każdy poprawny arkusz CSS jest zarazem poprawnym plikiem SCSS.

Na czym polega SCSS

SCSS dodaje do stylów mechanizmy, których brakuje w czystym CSS. Najważniejsze to:

• Zmienne — wartości takie jak kolory czy odstępy zapisuje się raz (np. $primary: #0d6efd;) i używa w wielu miejscach;
• Zagnieżdżanie — reguły dla elementów potomnych umieszcza się wewnątrz reguły rodzica, co odzwierciedla strukturę HTML i skraca zapis;
• Mixiny — nazwane bloki deklaracji przyjmujące argumenty, wstawiane w dowolnym miejscu dyrektywą @include;
• Częściowe pliki i import — style dzieli się na moduły (@use, @import) i składa w jeden arkusz;
• Funkcje i operatory — obliczenia, np. przekształcanie kolorów czy działania matematyczne na wymiarach.

Kompilację uruchamia się narzędziami takimi jak Dart Sass, zwykle zintegrowanymi z bundlerem (Vite, Webpack) w procesie budowania frontendu.

Zastosowanie w praktyce

SCSS jest standardem w większych projektach frontendowych, gdzie surowy CSS staje się trudny w utrzymaniu. Dzięki zmiennym i mixinom łatwo buduje się spójne systemy designu, motywy jasny/ciemny czy responsywne breakpointy. Popularny framework Bootstrap udostępnia źródła w SCSS, co pozwala dostosować kolory i rozmiary przez nadpisanie zmiennych zamiast walki ze specyficznością reguł. Dodatkowo mechanizm częściowych plików pozwala rozbić style na logiczne moduły — osobno przyciski, formularze, siatkę — i utrzymywać porządek w dużym projekcie. Konkurencyjnym preprocesorem o zbliżonych możliwościach jest LESS, jednak ekosystem Sass/SCSS pozostaje dziś dominującym wyborem, wspieranym przez większość narzędzi budujących frontend.