Funkcje SASS

Ten artykuł wyjaśnia funkcje SASS.

Szczegółowo wyjaśnimy funkcje SASS od podstaw po zaawansowane zagadnienia, w tym praktyczne przykłady przydatne w codziennej pracy.

YouTube Video

Funkcje SASS

Funkcje SASS to potężne narzędzia zamykające wielokrotnie używaną logikę wewnątrz arkuszy stylów, pozwalając na obliczenia, formatowanie i rozgałęzienia warunkowe.

Podstawowa struktura i użycie funkcji

Funkcje SASS są definiowane za pomocą @function i zwracają wartość przy użyciu @return. Funkcje są wywoływane w taki sam sposób jak funkcje wbudowane.

1// Example: Define a simple function that doubles a value
2@function double($n) {
3  @return $n * 2;
4}
5
6// Use the function
7.example {
8  width: double(10px);  // -> 20px
9}

• Ten kod definiuje funkcję, która podwaja liczbę i stosuje ją do szerokości. W rezultacie zostanie wygenerowane .example { width: 20px; }.

Argumenty, wartości domyślne i obsługa typów

Funkcje mogą przyjmować wiele argumentów oraz ustawiać wartości domyślne. SASS nie wymusza statycznego typowania, ale dbanie o format argumentów sprawia, że funkcje są bardziej niezawodne.

1// Example: Function with default parameters
2@function responsive-font($base-size, $scale: 1.2, $unit: px) {
3  @return $base-size * $scale + $unit;
4}
5
6.title {
7  font-size: responsive-font(16, 1.25);  // -> 20px
8}

• responsive-font ma wartości domyślne dla scale i unit, dzięki czemu niektóre argumenty mogą zostać pominięte przy wywołaniu. W tym przykładzie zwrócona zostanie wartość taka jak font-size: 20px;.

Używanie argumentów wariadycznych (...)

Używaj argumentów wariadycznych, jeśli chcesz przekazać wiele wartości. Jest to przydatne przy obsłudze list lub wielu kolorów.

 1// Example: Sum any number of numbers passed in
 2@function sum-all($numbers...) {
 3  $total: 0;
 4  @each $n in $numbers {
 5    $total: $total + $n;
 6  }
 7  @return $total;
 8}
 9
10.box {
11  padding: sum-all(4px, 6px, 10px);  // -> 20px
12}

• Argument wariadyczny taki jak $numbers... jest traktowany jako lista i może być przetwarzany za pomocą @each. W tym przykładzie zostanie zwrócone padding: 20px;.

Zwracanie i manipulacja listami lub mapami

Funkcje mogą również zwracać listy (rozdzielone spacją lub przecinkiem) oraz mapy. To przydatne przy zwracaniu złożonych wartości.

 1@use "sass:map";
 2
 3// Example: Return a map of spacing scale
 4@function spacing-scale($base) {
 5  @return (
 6    'small': $base * 0.5,
 7    'medium': $base,
 8    'large': $base * 2
 9  );
10}
11
12$scale: spacing-scale(8px);
13
14.card {
15  margin-bottom: map.get($scale, 'medium');
16}

• Funkcja zwraca mapę, a następnie wartości są pobierane za pomocą map.get. Pozwala to zachować spójny system odstępów.

Funkcje z warunkami i pętlami

@if, @else if, @else, @for, @each oraz @while mogą być używane wewnątrz funkcji. Możesz tworzyć logikę obliczeniową wykorzystując warunki i pętle.

 1// Example: Generate modular scale value using loop
 2@function modular-scale($step, $base: 1rem, $ratio: 1.25) {
 3  $result: $base;
 4  @if $step == 0 {
 5    @return $result;
 6  }
 7  @if $step > 0 {
 8    @for $i from 1 through $step {
 9      $result: $result * $ratio;
10    }
11  } @else {
12    @for $i from 1 through abs($step) {
13      $result: $result / $ratio;
14    }
15  }
16  @return $result;
17}
18
19.h1 {
20  font-size: modular-scale(3, 1rem, 1.333);
21}

• Ta funkcja oblicza skalę modularną i mnoży lub dzieli w zależności od dodatnich lub ujemnych kroków. modular-scale(3, 1rem, 1.333) zwraca rozmiar czcionki o trzy kroki większy od bazowego.

Obsługa błędów i ostrzeżeń (@error, @warn)

Możesz przerwać za pomocą @error przy nieprawidłowych argumentach lub nieoczekiwanych operacjach oraz wywoływać ostrzeżenia za pomocą @warn. Celem jest szybkie ostrzeganie użytkowników o problemach.

 1@use "sass:math";
 2@use "sass:meta";
 3
 4// Example: Validate input and throw an error for invalid units
 5@function ensure-length($value) {
 6  @if meta.type-of($value) != 'number' or math.is-unitless($value) {
 7    @error "Expected a length with units, got #{$value}.";
 8  }
 9  @return $value;
10}
11
12// Valid input (should pass)
13.test-valid {
14  width: ensure-length(10px); // expect: 10px
15}
16
17// Invalid input (should throw error during compilation)
18// Uncomment the following to test error handling:
19//
20// .test-invalid {
21//   // expect error: "Expected a length with units, got 10."
22//   width: ensure-length(10);
23// }

• Jeśli przekażesz nieprawidłowe wartości, błąd pojawi się podczas budowania, co ułatwi znalezienie przyczyny. Sprawdzanie wewnątrz funkcji jest przydatne do wczesnego wykrywania błędów.

Tworzenie funkcji do obsługi kolorów

W SASS możesz łączyć różne funkcje manipulujące kolorami, aby stworzyć własną paletę kolorów. To jest przydatne do zarządzania spójnym schematem kolorów w całym projekcie.

 1@use "sass:color";
 2@use "sass:list";
 3
 4// Example: Generate a color palette (tints and shades) from a base color
 5@function palette($color, $steps: 5, $strength: 10%) {
 6  $colors: ();
 7  @for $i from 0 through $steps {
 8    $amount: $i * $strength;
 9    $shade: if($i == 0, $color, color.mix(black, $color, $amount));
10    $tint: color.mix(white, $color, $amount);
11    $colors: list.append($colors, $shade);
12    $colors: list.append($colors, $tint);
13  }
14  @return $colors;
15}
16
17$palette: palette(#3498db, 3, 15%);
18
19.btn {
20  background-color: list.nth($palette, 1);
21}

• W tym przykładzie color.mix jest używany do tworzenia odcieni przez mieszanie z czernią i rozjaśnień przez mieszanie z bielą. Wartości są zwracane na liście i można uzyskać do nich dostęp za pomocą list.nth.

Uwagi dotyczące wydajności i czasu kompilacji

Funkcje SASS są oceniane podczas kompilacji. Długotrwałe pętle, głęboka rekurencja czy obsługa obszernych map wydłużą czas kompilacji. Utrzymuj funkcje małe i proste; w razie potrzeby rozważ przeniesienie złożonych operacji poza SASS, do narzędzi budujących lub preprocesorów.

Praktyczna kolekcja funkcji narzędziowych

Oto kilka najczęściej używanych funkcji narzędziowych. Kod jest zaprojektowany, aby można było go od razu użyć w prawdziwych projektach.

 1@use "sass:math";
 2
 3// Example: Clamp a value between min and max
 4@function clamp-value($value, $min, $max) {
 5  @if $value < $min {
 6    @return $min;
 7  } @else if $value > $max {
 8    @return $max;
 9  }
10  @return $value;
11}
12
13// Example: Convert px to rem (with optional root size)
14@function px-to-rem($px, $root: 16px) {
15  @if math.unit($px) != "px" {
16    @error "px-to-rem requires a px value.";
17  }
18  @return ($px / $root) * 1rem;
19}

• clamp-value narzuca górne i dolne ograniczenia na wartość, a px-to-rem konwertuje wartości pikseli na rem. Obie te funkcje upraszczają typowe zadania w projektowaniu responsywnym.

Wybór pomiędzy @function a mixinami (@mixin)

Funkcje specjalizują się w zwracaniu wartości, natomiast mixiny generują bloki CSS. Jeśli wynikiem logiki jest pojedyncza wartość właściwości, użyj funkcji; jeśli cały blok stylów, użyj mixinu.

 1// Example: Function returns a value
 2@function border-radius-value($size) {
 3  @return $size * 1px;
 4}
 5
 6// Example: Mixin outputs properties
 7@mixin rounded($size) {
 8  border-radius: border-radius-value($size);
 9  -webkit-border-radius: border-radius-value($size);
10}
11.card {
12  @include rounded(8);
13}

• Funkcje zwracają wartości, takie jak liczby lub kolory, używane w innych właściwościach, natomiast mixiny wstawiają całe grupy właściwości bezpośrednio. Ścisły podział w projekcie zwiększa łatwość utrzymania kodu.

Obsługa ciągów tekstowych i uwagi dotyczące formatowania wyjścia

Zachowaj ostrożność przy obsłudze liczb z jednostkami i ciągami w SASS. Łączenie ciągu ze liczbą i jednostką może prowadzić do niezamierzonych rezultatów. Używaj unquote() lub interpolacji (#{}) w razie potrzeby.

 1@use "sass:math";
 2
 3// Example: Safely create a CSS value string
 4@function px-percentage($px, $total) {
 5  $percent: math.div($px, $total) * 100;
 6  @return "#{$percent}%";
 7}
 8
 9// Safer with interpolation and math module
10@function px-percentage-safe($px, $total) {
11  $percent: math.div($px, $total) * 100;
12  // Round to 2 decimal places safely
13  $rounded: math.div(math.round($percent * 100), 100);
14  @return "#{$rounded}%";
15}

• Zwracając wartości procentowe jako tekst, zadbaj o precyzję za pomocą interpolacji lub funkcji round dla lepszej czytelności. Aby uniknąć błędów, zawsze jasno zarządzaj typami danych przy łączeniu wyników obliczeń z tekstem.

Najlepsze praktyki testowania i dokumentowania

Po napisaniu funkcji utwórz małe pliki SCSS z przykładami użycia jako testami, co ułatwi utrzymanie kodu. Możesz dokumentować dla każdej funkcji typ/jednostkę wejścia, typ zwracanej wartości, sposób obsługi błędów i przykłady użycia.

 1@use "sass:math";
 2
 3// Example: Inline "tests" (partial usage examples)
 4// These can be compiled separately during development
 5
 6@function double($n) {
 7  @return $n * 2;
 8}
 9
10@function px-to-rem($px, $root: 16px) {
11  @if math.unit($px) != "px" {
12    @error "px-to-rem requires a px value.";
13  }
14  @return math.div($px, $root) * 1rem;
15}
16
17// Test double()
18.test-double {
19  width: double(12px); // expect 24px
20}
21
22// Test px-to-rem()
23.test-rem {
24  font-size: px-to-rem(18px, 18px); // expect 1rem
25}
26
27// --- Inline debug tests ---
28@debug "double(12px) => #{double(12px)} (expect 24px)";
29@debug "px-to-rem(18px, 18px) => #{px-to-rem(18px, 18px)} (expect 1rem)";

• Pozostawianie komentarzy z małymi przykładami „oczekiwanego rezultatu” ułatwia wychwycenie regresji podczas przyszłych refaktoryzacji. Automatyczna kompilacja w środowisku CI i wizualna kontrola wyników jest skuteczna.

Podsumowanie

Funkcje SASS to potężny sposób na zwiększenie powtarzalności i spójności stylów. Projektuj je tak, by były małe i proste, a bezpieczeństwo zapewniaj dzięki @error i @warn. Funkcje narzędziowe dla kolorów, odstępów i konwersji jednostek warto połączyć we wspólną bibliotekę. Aby uniknąć nadmiernego obciążenia kompilacji, rozważ przeniesienie złożonych operacji do innych etapów budowania, jeśli to konieczne.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video