Definicja #
SCSS (Sassy CSS) to jedna z dwóch składni preprocessora SASS (Syntactically Awesome Style Sheets) — ta bardziej popularna, zachowująca pełną zgodność ze składnią CSS. Pliki .scss są kompilowane przez Sass do standardowego CSS rozumianego przez przeglądarki.
Kluczowe funkcje SCSS:
- Zmienne —
$primary-color: #3498db;; definiowanie wartości raz i użycie w wielu miejscach (przed CSS Custom Properties / var()); współcześnie CSS variables (--primary) pełnią podobną rolę, ale zmienne SCSS są wyliczane w czasie kompilacji - Zagnieżdżanie selektorów —
.card { .title { font-size: 1.2rem; } }; odwzorowanie struktury HTML w CSS; ampersand&do pseudo-klas:&:hover,&--modifier - Mixiny —
@mixin flex-center { display: flex; justify-content: center; }; bloki CSS do wielokrotnego użycia z parametrami; włączanie przez@include flex-center; - Extends —
@extend .button-base;; dziedziczenie zestawu właściwości CSS; stosować ostrożnie (generuje nieintuicyjny CSS) - Funkcje i operatory —
darken($color, 10%),lighten(),rgba(), arytmetyka:width: 100% / 3; - Importy i partial files —
@use 'variables',@forward; modularyzacja stylów przez pliki_variables.scss,_mixins.scss - Loops i conditionals —
@for,@each,@if; generowanie klas utility programatycznie
SCSS vs SASS (old syntax): SASS (indent-based, bez klamer) to starsza składnia — rzadko stosowana w nowych projektach. SCSS (CSS-compatible) jest standardem.
Zastosowania #
- Stylizacja komponentów Angular — SCSS jako domyślna opcja przy
ng new; zagnieżdżanie selektorów dla komponentów, BEM naming convention - Theming Material Design — Angular Material używa SCSS z mixinami do theming:
mat.define-theme()i Angular Material SCSS API - Design system i biblioteki komponentów — zmienne SCSS jako design tokens, mixiny jako reusable patterns
- Projekty React i Vue — SCSS w CSS Modules (
styles.module.scss); izolacja stylów per komponent - Narzędzia CSS utility framework — Tailwind CSS generuje utility classes podobnymi mechanizmami; własne utility przez @each loops
Ścieżka nauki #
SCSS jest standardowym narzędziem frontendowym — każdy frontend developer powinien go znać.
Zacznij od:
- Instalacja:
npm install -D sass; zmiana rozszerzenia pliku.css→.scss - Zmienne:
$color-primary,$font-size-base; konwencja nazewnictwa kebab-case - Zagnieżdżanie: odwzorowanie struktury komponentu; ampersand
&dla modyfikatorów BEM - Partial files:
_variables.scss,_mixins.scss; importowanie przez@use
Następnie pogłębiaj:
- Mixiny z parametrami — responsywność:
@mixin respond-to($breakpoint) - @use i @forward — nowoczesny system modułów Sass (zastąpił @import)
- SCSS w Angular Material — theming przez SCSS API; customizacja palette kolorów
- CSS Custom Properties vs zmienne SCSS — kiedy używać którego (runtime vs compile-time)
FAQ #
- Czym różni się SCSS od SASS?
- SASS to preprocessor CSS istniejący w dwóch składniach. Starsza składnia SASS (indent-based) nie używa klamer ani średników — podobna do Pythona. SCSS (Sassy CSS) to nowsza składnia z klamrami i średnikami — każdy plik CSS jest poprawnym plikiem SCSS. SCSS jest zdecydowanie popularniejszą składnią w nowoczesnych projektach.
- Czym różnią się zmienne SCSS od CSS Custom Properties?
- Zmienne SCSS ($color) są wyliczane w czasie kompilacji i nie istnieją w przeglądarce — nie można ich zmieniać dynamicznie przez JavaScript. CSS Custom Properties (--color) istnieją w runtime przeglądarki, są dostępne przez JavaScript (getComputedStyle) i mogą zmieniać się w zależności od kontekstu (np. dark mode przez media query lub klasa). Nowoczesne projekty często łączą obie techniki.
- Czym są mixiny SCSS i kiedy je stosować?
- Mixin (@mixin) to blok SCSS z opcjonalnymi parametrami, dołączany przez @include. Używany dla powtarzających się wzorców CSS: responsywne breakpointy, flexbox helpers, truncate text. Alternatywa: @extend — dziedziczenie selektora (generuje wielokrotne selektory w CSS, może powodować nieoczekiwane efekty). Preferuj mixiny nad @extend dla przewidywalności.
- Czy SCSS jest potrzebny przy Tailwind CSS?
- Tailwind CSS to utility-first framework działający bez preprocessora — klasy utility w HTML zamiast pisania CSS. Przy Tailwind SCSS jest mniej potrzebny, choć nadal używany dla custom komponentów (@apply do tworzenia klas z utility) i integracji z design systemem. W projektach Angular SCSS i Tailwind mogą współistnieć — Tailwind w utility, SCSS w komponentowych stylach.