0Pricing
CSS Academy · Lekcja

Funkcje Sass i sterowanie przepływem

Pisz dynamiczną logikę CSS, używając wbudowanych funkcji Sass oraz dyrektyw @if, @each i @for.

Funkcje Sass i sterowanie przepływem to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 4 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.

Wbudowane funkcje Sass

Sass udostępnia wiele wbudowanych funkcji do modyfikowania kolorów, wykonywania obliczeń matematycznych, operacji na ciągach znaków i nie tylko. Są one wykonywane w czasie kompilacji.

<div class="darker">darken($base, 15%)</div>
  <div class="lighter">lighten($base, 15%)</div>
  <div class="faded">transparentize($base, 0.5)</div>
  <div class="mixed">mix($base, white, 60%)</div>

Funkcje kolorów

Najważniejsze funkcje kolorów Sass:

  • darken($color, $amount)
  • lighten($color, $amount)
  • saturate($color, $amount)
  • mix($color1, $color2, $weight)
  • rgba($color, $alpha)
  • color.scale($color, $lightness: 20%)

Własne funkcje z użyciem @function

Zdefiniuj wielokrotnie używane funkcje zwracające wartości, a nie reguły CSS:

<h2 class="heading">Heading (2rem)</h2>
  <p class="body">Body text (1.125rem)</p>

Sterowanie przepływem @if @else

Warunkowo generuj CSS na podstawie wartości zmiennych:

<p class="text-large">Large text variant</p>
  <p class="text-small">Small text variant</p>
  <p class="text-default">Default text variant</p>

Pętla @each

Iteruj po liście lub mapie, aby wygenerować wiele reguł:

<button class="btn-primary">Primary</button>
  <button class="btn-danger">Danger</button>
  <button class="btn-success">Success</button>

Pętla @for

Generuj CSS dla zakresu wartości:

<div class="col-1">col-1 (20%)</div>
  <div class="col-2">col-2 (40%)</div>
  <div class="col-3">col-3 (60%)</div>
  <div class="col-4">col-4 (80%)</div>
  <div class="col-5">col-5 (100%)</div>

Pętla @while

Wykonuj pętlę, dopóki warunek jest prawdziwy. Należy używać jej oszczędnie — @each i @for pokrywają większość przypadków:

<div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>

Mapy Sass

Mapy to struktury danych typu klucz-wartość w Sass:

<div class="box">Responsive box (resize wider than 768px to see color change)</div>

@error @warn @debug

Sass udostępnia trzy funkcje diagnostyczne:

  • @error: przerywa kompilację z komunikatem
  • @warn: rejestruje ostrzeżenie bez przerywania kompilacji
  • @debug: rejestruje wartość podczas programowania

Interpolacja #{...}

Za pomocą #{$variable} można wstawiać wartości zmiennych do selektorów, nazw właściwości lub media queries:

<p class="element">Interpolated property (#{$property})</p>

Szybkie sprawdzenie

Czym różnią się elementy Sass @mixin i Sass @function?

Podsumowanie

Wbudowane funkcje kolorów Sass (darken, lighten, mix) umożliwiają modyfikowanie kolorów podczas kompilacji. Własna funkcja @function zwraca obliczoną wartość. @if/@else dodaje warunkowe generowanie danych wyjściowych. @each iteruje po listach i mapach. @for iteruje po zakresach liczb. Funkcje te umożliwiają tworzenie zaawansowanych arkuszy stylów zgodnych z zasadą DRY i zawierających minimalną ilość powtórzeń.

Często zadawane pytania

Czy lekcja „Funkcje Sass i sterowanie przepływem” jest bezpłatna?

Tak — pełny tekst „Funkcje Sass i sterowanie przepływem” 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 „Funkcje Sass i sterowanie przepływem”?

Pisz dynamiczną logikę CSS, używając wbudowanych funkcji Sass oraz dyrektyw @if, @each i @for. Ć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 4 z 4.

Ile czasu zajmuje lekcja „Funkcje Sass i sterowanie przepływem”?

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

  1. Zmienne, zagnieżdżanie i fragmenty
  2. Miksiny i dołączanie
  3. Extend i selektory zastępcze
  4. Funkcje Sass i sterowanie przepływem
← Powrót do CSS Academy