CSS Academy · Lekcja

Zmienne, zagnieżdżanie i fragmenty

Używaj zmiennych Sass do przechowywania wielokrotnie używanych wartości, zagnieżdżaj selektory dla czytelności i dziel kod na fragmenty.

Zmienne, zagnieżdżanie i fragmenty to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

Czym jest Sass?

Sass (Syntactically Awesome Stylesheets) to preprocesor CSS rozszerzający CSS o zmienne, zagnieżdżanie, mixiny, funkcje i inne możliwości. Pliki Sass są kompilowane do standardowego CSS.

Dwie składnie Sass

Sass ma dwa formaty plików:

.scss — składnia będąca nadzbiorem zgodnym z CSS (najpopularniejsza)
.sass — składnia oparta na wcięciach (bez nawiasów klamrowych i średników)

Ten kurs obejmuje SCSS.

Zmienne Sass

Zmienne Sass mają prefiks $. Są rozwiązywane w czasie kompilacji — w przeciwieństwie do niestandardowych właściwości CSS nie są aktywne w przeglądarce.

<button class="button">Sass Variables</button>

Zmienne Sass a niestandardowe właściwości CSS

Najważniejsze różnice:

Zmienne Sass: działają w czasie kompilacji, nie występują w przeglądarce i nie można ich zmieniać w czasie działania
Niestandardowe właściwości CSS: działają w przeglądarce, można je zmieniać za pomocą JS i uwzględniają kaskadę

Współcześnie warto używać obu rozwiązań. Zmienne Sass służą do logiki na etapie budowania, a niestandardowe właściwości CSS do stylowania motywów w czasie działania.

Zagnieżdżanie

Sass umożliwia zagnieżdżanie selektorów, odzwierciedlając strukturę HTML. Skompilowany wynik używa selektorów potomków.

<div class="card">
    <div class="card-title">Card title</div>
    <div class="card-body">Card body text</div>
  </div>

Selektor nadrzędny &

& oznacza selektor nadrzędny, umożliwiając stosowanie wzorców podobnych do BEM i selektorów stanów:

<button class="button">Button</button>
  <button class="button active">Active state (font-weight: bold)</button>
  <button class="button--primary">BEM modifier: button--primary</button>
  <span class="button__icon">&#128279;</span> BEM element: button__icon

Ostrzeżenie dotyczące głębokości zagnieżdżania

Nie należy stosować zagnieżdżenia głębszego niż 3 poziomy. Głębokie zagnieżdżanie tworzy nadmiernie szczegółowe selektory i sprawia, że CSS staje się podatny na błędy. Jeśli zagnieżdżenie staje się głębokie, architektura CSS prawdopodobnie wymaga refaktoryzacji.

Pliki częściowe Sass

Plik częściowy to plik Sass, którego nazwa zaczyna się od podkreślenia (_card.scss). Pliki częściowe nie są kompilowane niezależnie — należy je zaimportować do innego pliku. Zapobiega to generowaniu niepotrzebnych plików wyjściowych CSS.

@use do importowania

Współczesny Sass używa @use do importowania plików częściowych. Zapewnia on przestrzenie nazw, które zapobiegają konfliktom zmiennych:

<h2 class="heading">Namespaced heading (t.$primary-color)</h2>

@forward dla bibliotek

@forward ponownie eksportuje elementy modułu, dzięki czemu mogą z nich korzystać pliki importujące bibliotekę:

<span class="badge">Forwarded token (lib.$primary-color)</span>

Przestarzałe @import

Starsza dyrektywa @import jest wycofywana w Dart Sass. Należy przeprowadzić migrację do @use i @forward, aby uzyskać lepsze przestrzenie nazw i wydajność.

Szybkie sprawdzenie

Jaki selektor CSS Sass wygeneruje z zagnieżdżenia .nav { .link { color: white; } }?

Podsumowanie

Zmienne Sass ($name) są rozwiązywane w czasie kompilacji. Zagnieżdżanie odzwierciedla strukturę HTML, ale nie należy przekraczać 3 poziomów. & odwołuje się do selektora nadrzędnego na potrzeby pseudoklas, stanów i modyfikatorów BEM. Pliki częściowe (_file.scss) są importowane, a nie kompilowane bezpośrednio. Do współczesnego ładowania modułów Sass należy używać @use, a nie @import.

Często zadawane pytania

Czy lekcja „Zmienne, zagnieżdżanie i fragmenty” jest bezpłatna?

Tak — pełny tekst „Zmienne, zagnieżdżanie i fragmenty” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Zmienne, zagnieżdżanie i fragmenty”?

Używaj zmiennych Sass do przechowywania wielokrotnie używanych wartości, zagnieżdżaj selektory dla czytelności i dziel kod na fragmenty. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Zmienne, zagnieżdżanie i fragmenty”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?

Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do CSS Academy