Sass: Przewodnik po preprocesorze CSS

Wyobraź sobie że Twoja strona o świątyni w Karnaku ma tysiąc linii CSS. Złoty kolor #D4AF37 wpisałeś w czterdziestu miejscach, a ten sam zestaw deklaracji kopiujesz do każdego nowego przycisku. Gdy faraon zażyczy sobie ciemniejszego złota, czeka Cię żmudne przeszukiwanie całego zwoju. Właśnie takie kłopoty rozwiązuje Sass.

Sass, czyli Syntactically Awesome Style Sheets, to preprocesor CSS, który znacznie rozszerza możliwości czystego CSS. Oferuje zmienne, mixiny, dziedziczenie, zagnieżdżanie, operatory, funkcje i kontrolę przepływu, dzięki czemu praca z arkuszami stylów staje się bardziej efektywna i przyjemna.

Czego się nauczysz

• wyjaśnisz, czym jest preprocesor i dlaczego przeglądarka nie czyta plików Sass,
• odróżnisz składnię SCSS od składni wcięć Sass,
• skompilujesz plik .scss do zwykłego CSS,
• użyjesz zagnieżdżania, zmiennych, mixinów i dziedziczenia.

Preprocesor, czyli skryba architekta

Przeglądarka rozumie wyłącznie CSS, więc pliku .scss nie podepniesz bezpośrednio do strony. Piszesz kod w Sass, a kompilator tłumaczy go na zwykły plik .css, jak skryba przepisujący skróty architekta na hieroglify, które każdy odczyta na ścianie świątyni. Droga wygląda więc tak: plik .scss, kompilator Sass, plik .css i dopiero przeglądarka. Głównym kompilatorem jest Dart Sass, dostępny w npm jako pakiet sass:

1npm install --save-dev sass
2npx sass styles.scss styles.css

Pierwsze polecenie dodaje kompilator do projektu, drugie czyta styles.scss i zapisuje wynik w styles.css. Plik źródłowy pozostaje nietknięty, a do strony podpinasz tylko wygenerowany CSS. Z flagą --watch kompilator przebuduje CSS po każdym zapisie pliku.

Składnia

Sass obsługuje dwie różne składnie: SCSS (rozwiązanie zbliżone do CSS, z nawiasami klamrowymi, pliki .scss) oraz Sass (wcięcia i brak nawiasów klamrowych, pliki .sass). SCSS jest nadzbiorem CSS: poza nielicznymi wyjątkami każdy poprawny arkusz CSS jest też poprawnym plikiem SCSS.

Przykład w składni SCSS

Tak wygląda nagłówek z zagnieżdżonym podnagłówkiem zapisany w SCSS, czyli niemal jak zwykły CSS:

1.naglowek {
2  color: red;
3
4  .podnaglowek {
5    font-size: 16px;
6  }
7}

Klamry i średniki zostają tam, gdzie w CSS. Nowe jest tylko to, że reguła .podnaglowek siedzi wewnątrz reguły .naglowek.

Przykład w składni Sass

Ten sam fragment w składni wcięć traci klamry oraz średniki, a o strukturze decydują wyłącznie wcięcia:

1.naglowek
2  color: red
3
4  .podnaglowek
5    font-size: 16px

Z obu wersji kompilator wygeneruje identyczny CSS, bo różni się zapis, a nie wynik. Polecam Ci SCSS: wygląda jak CSS, który już znasz, i to w nim napisana jest większość projektów oraz dokumentacji.

Zagnieżdżanie

W HTML nawigacja to lista ul, w niej elementy li, a w nich linki a. Sass pozwala odwzorować tę hierarchię, zagnieżdżając selektory, dzięki czemu powiązane reguły trzymasz w jednym miejscu:

1.nav {
2  ul {
3    margin: 0;
4    padding: 0;
5    list-style: none;
6  }
7
8  li { display: inline-block; }
9
10  a {
11    display: block;
12    padding: 6px 12px;
13    text-decoration: none;
14  }
15}

Po kompilacji dostaniesz zwykłe selektory potomków: .nav ul, .nav li i .nav a. HTML nie zmienia się ani trochę, bo zagnieżdżenie istnieje tylko w pliku źródłowym. Nie schodź jednak głębiej niż na trzy poziomy, bo każdy kolejny wydłuża selektor i podnosi jego specyficzność.

Zmienne

Zmienna przechowuje wartość używaną w wielu miejscach arkusza. W Sass jej nazwa zaczyna się od znaku dolara, a po nazwie stawiasz dwukropek, wartość i średnik, na przykład $gold: #D4AF37 dla egipskiego złota:

1$primary-color: #333;
2
3body {
4  background-color: $primary-color;
5}

Kompilator podmienia każde $primary-color na #333, więc w wynikowym CSS zmiennej już nie ma, zostaje sama wartość. To różnica względem zmiennych CSS w rodzaju --primary-color, które żyją w przeglądarce. Zmieniasz wartość w jednym miejscu, kompilujesz ponownie i nowy kolor pojawia się wszędzie.

Mixiny

Mixin to nazwany zestaw deklaracji, który definiujesz raz dyrektywą @mixin, a potem wstawiasz do dowolnej reguły dyrektywą @include. Działa jak pieczęć z kartuszem faraona odciskana na kolejnych tabliczkach:

1@mixin reset-list {
2  margin: 0;
3  padding: 0;
4  list-style: none;
5}
6
7ul {
8  @include reset-list;
9}

Kompilator wkleja trzy deklaracje z mixina w miejsce @include, więc w CSS zobaczysz je w regule dla ul. Sam mixin nie trafia do wyniku, dopóki go nie użyjesz.

Dziedziczenie

Czasem kilka klas ma wspólną bazę i różni się jednym szczegółem, jak komunikaty o sukcesie i o błędzie. Dyrektywa @extend pozwala klasie odziedziczyć wszystkie style innej klasy:

1.message {
2  border: 1px solid #ccc;
3  padding: 10px;
4  color: #333;
5}
6
7.success {
8  @extend .message;
9  border-color: green;
10}
11
12.error {
13  @extend .message;
14  border-color: red;
15}

Kompilator nie kopiuje deklaracji, tylko dopisuje selektory do istniejącej reguły, tworząc grupę .message, .success, .error. Każda klasa nadpisuje potem wyłącznie kolor ramki. W dużych projektach @extend potrafi jednak wygenerować zaskakująco długie listy selektorów, dlatego zwykle sięgam po mixiny.

Kontrola przepływu

Sass oferuje też instrukcje warunkowe i pętle, takie jak @if, @for, @each i @while. Dzięki nim arkusz sam generuje serie klas, na przykład po jednej dla każdego koloru palety. Poznasz je w kolejnych lekcjach modułu.

Sass to potężne narzędzie, które może znacznie zwiększyć produktywność i przyjemność z pisania CSS. Współczesny CSS ma już własne zmienne i zagnieżdżanie, które poznasz w dalszej części kursu, ale Sass wciąż wygrywa mixinami, pętlami i podziałem kodu na moduły. W piaskownicy poniżej porównaj plik styles.scss ze skompilowanym styles.css i sprawdź, co kompilator zrobił z każdą zmienną.

Pamiętaj: Sass to skryba, który Twoje skróty zamienia w czyste hieroglify CSS, a przeglądarka czyta tylko wynik jego pracy.

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>SCSS/Sass - Wprowadzenie</title>
7    <link rel="stylesheet" href="styles.css">
8</head>
9<body>
10    <div class="container">
11        <h1>Wprowadzenie do SCSS/Sass</h1>
12
13        <section class="demo-section">
14            <h2>Zmienne w SCSS</h2>
15            <div class="variables-demo">
16                <div class="color-box primary">Kolor główny ($primary-color)</div>
17                <div class="color-box secondary">Kolor drugorzędny ($secondary-color)</div>
18                <div class="color-box accent">Kolor akcentujący ($accent-color)</div>
19            </div>
20            <div class="font-demo">
21                <p class="font-primary">Czcionka główna ($font-primary)</p>
22                <p class="font-secondary">Czcionka drugorzędna ($font-secondary)</p>
23            </div>
24        </section>
25
26        <section class="demo-section">
27            <h2>Zagnieżdżanie w SCSS</h2>
28            <nav class="navbar">
29                <ul>
30                    <li><a href="#">Strona główna</a></li>
31                    <li><a href="#">O nas</a></li>
32                    <li><a href="#">Usługi</a></li>
33                    <li><a href="#">Kontakt</a></li>
34                </ul>
35            </nav>
36            <p class="description">Nawigacja została stylizowana z użyciem zagnieżdżania SCSS</p>
37        </section>
38
39        <section class="demo-section">
40            <h2>Ampersand (&) - Parent Selector</h2>
41            <div class="buttons-demo">
42                <button class="btn">Zwykły przycisk</button>
43                <button class="btn btn--primary">Przycisk główny</button>
44                <button class="btn btn--secondary">Przycisk drugorzędny</button>
45                <button class="btn btn--large">Duży przycisk</button>
46            </div>
47        </section>
48
49        <section class="demo-section">
50            <h2>Partials i moduły</h2>
51            <div class="modules-demo">
52                <div class="card">
53                    <div class="card-header">
54                        <h3>Karta modułowa</h3>
55                    </div>
56                    <div class="card-body">
57                        <p>Ta karta wykorzystuje style z różnych modułów SCSS.</p>
58                    </div>
59                    <div class="card-footer">
60                        <button class="btn btn--primary">Akcja</button>
61                    </div>
62                </div>
63            </div>
64        </section>
65
66        <section class="demo-section">
67            <h2>Mixiny</h2>
68            <div class="mixins-demo">
69                <div class="flex-container">
70                    <div class="flex-item">Element 1</div>
71                    <div class="flex-item">Element 2</div>
72                    <div class="flex-item">Element 3</div>
73                </div>
74                <div class="shadow-box">Box z cieniem (mixin)</div>
75                <div class="gradient-box">Box z gradientem (mixin)</div>
76            </div>
77        </section>
78
79        <section class="demo-section">
80            <h2>Extend i dziedziczenie</h2>
81            <div class="extend-demo">
82                <div class="message">Podstawowa wiadomość</div>
83                <div class="message message--success">Wiadomość sukcesu</div>
84                <div class="message message--error">Wiadomość błędu</div>
85                <div class="message message--warning">Wiadomość ostrzeżenia</div>
86            </div>
87        </section>
88
89        <section class="demo-section">
90            <h2>Operatory matematyczne</h2>
91            <div class="operators-demo">
92                <div class="grid-container">
93                    <div class="grid-item">Element 1</div>
94                    <div class="grid-item">Element 2</div>
95                    <div class="grid-item">Element 3</div>
96                    <div class="grid-item">Element 4</div>
97                </div>
98                <p class="calculation-info">Szerokość obliczona: (100% - 60px) / 4</p>
99            </div>
100        </section>
101
102        <section class="demo-section">
103            <h2>Funkcje SCSS</h2>
104            <div class="functions-demo">
105                <div class="color-functions">
106                    <div class="color-original">Kolor oryginalny</div>
107                    <div class="color-lighter">Jaśniejszy (lighten)</div>
108                    <div class="color-darker">Ciemniejszy (darken)</div>
109                    <div class="color-saturated">Nasycony (saturate)</div>
110                </div>
111            </div>
112        </section>
113
114        <section class="demo-section">
115            <h2>Media Queries z mixinami</h2>
116            <div class="responsive-demo">
117                <div class="responsive-box">
118                    <p>Ta sekcja zmienia layout w zależności od rozmiaru ekranu</p>
119                    <div class="responsive-grid">
120                        <div class="responsive-item">Item 1</div>
121                        <div class="responsive-item">Item 2</div>
122                        <div class="responsive-item">Item 3</div>
123                        <div class="responsive-item">Item 4</div>
124                    </div>
125                </div>
126            </div>
127        </section>
128    </div>
129</body>
130</html>