SASS

SASS (Syntactically Awesome Style Sheets) to preprocesor języka CSS stworzony przez Hampton Catlin (2006). Kompiluje się do zwykłego CSS, dodając funkcje programistyczne nieobecne w natywnym CSS. Jest jednym z najpopularniejszych narzędzi front-endowych, wbudowanym m.in. w Angular CLI i Create React App.

SASS dostępny jest w dwóch składniach:

• .scss (Sassy CSS) — składnia zbliżona do CSS; każdy poprawny CSS jest poprawnym SCSS. Najczęściej stosowana.
• .sass — oryginalna składnia oparta na wcięciach (bez nawiasów klamrowych i średników); zwięźlejsza, rzadziej używana

Kluczowe funkcje SASS:

• Zmienne — $primary-color: #333; — przechowywanie wartości kolorów, fontów, rozmiarów
• Zagnieżdżanie — selektory CSS zagnieżdżone według hierarchii HTML; selektor & dla pseudoklas
• Mixiny — @mixin wielokrotnie używane fragmenty CSS z parametrami; @include do wstawiania
• Dziedziczenie — @extend do współdzielenia zestawów właściwości między selektorami
• Funkcje i operatory — wbudowane funkcje dla kolorów (darken(), lighten()), matematyka, stringi
• Partiale i @import / @use — podział stylów na pliki cząstkowe (_variables.scss); nowoczesny @use i @forward zastępują przestarzały @import
• @each, @for, @while — pętle do generowania klas (np. utility classes)

Nowoczesne CSS (Custom Properties, calc(), nesting) przejmuje część funkcji SASS, ale SASS nadal jest szeroko stosowany w dużych projektach.

SASS stosuje się do:

• Organizacji stylów w dużych projektach front-endowych — podział na partiale, moduły, unikanie duplikacji kodu CSS
• Tworzenia design systemów i bibliotek komponentów — zmienne i mixiny zapewniają spójność kolorów, typografii, spacingów
• Projektów Angular — Angular CLI obsługuje SCSS natywnie; komponenty Angular używają plików .scss
• Generowania utility classes — pętle @each/@for do tworzenia klas marginesów, kolorów, rozmiarów
• Theming aplikacji — zmienne SASS dla trybu jasnego/ciemnego, brandingu klienta

SASS/SCSS jest standardem front-endowym — wbudowany w Angular CLI i większość bundlerów.

Zacznij od:

• Instalacja: npm install -g sass lub przez bundler projektu (Angular CLI, Vite, webpack)
• Zmienne SCSS: $color-primary, $spacing-base, $font-size-lg
• Zagnieżdżanie selektorów i operator & dla pseudoklas (&:hover, &.active)
• Partiale: podział stylów na pliki _variables.scss, _mixins.scss, _components.scss
• Podstawy @mixin i @include — parametryzowane fragmenty CSS

Następnie pogłębiaj:

• Nowoczesny system modułów SASS: @use i @forward zamiast @import
• Funkcje kolorów i matematyczne: darken(), lighten(), color.adjust()
• Mapy SASS ($map: (key: value)) do przechowywania zestawów wartości (np. palety kolorów)
• Porównaj z CSS Custom Properties (--variable) — kiedy SASS, kiedy natywne zmienne CSS
• Alternatywy: Less, Stylus, PostCSS