SASS-Funktionen

Dieser Artikel erklärt SASS-Funktionen.

Wir erklären SASS-Funktionen umfassend von den Grundlagen bis zu fortgeschrittenen Themen, inklusive praxisnaher Beispiele für den Arbeitsalltag.

YouTube Video

SASS-Funktionen

SASS-Funktionen sind leistungsstarke Werkzeuge, die wiederverwendbare Logik in Stylesheets kapseln und Berechnungen, Formatierungen sowie bedingte Verzweigungen ermöglichen.

Grundstruktur und Verwendung von Funktionen

SASS-Funktionen werden mit @function definiert und geben mit @return einen Wert zurück. Funktionen werden wie eingebaute Funktionen aufgerufen.

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}

• Dieser Code definiert eine Funktion, die eine Zahl verdoppelt und sie auf die Breite anwendet. Als Ergebnis wird .example { width: 20px; } generiert.

Argumente, Standardwerte und Typenbehandlung

Funktionen können mehrere Argumente akzeptieren und Standardwerte festlegen. SASS erzwingt keine statischen Typen, aber das Beachten von Argumentformaten macht Ihre Funktionen robuster.

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 hat Standardwerte für scale und unit, sodass einige Argumente beim Aufruf weggelassen werden können. In diesem Beispiel wird ein Wert wie font-size: 20px; ausgegeben.

Verwendung von variadischen Argumenten (...)

Verwenden Sie variadische Argumente, wenn Sie mehrere Werte übergeben möchten. Dies ist nützlich zum Verarbeiten von Listen oder mehreren Farben.

 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}

• Ein variadisches Argument wie $numbers... wird als Liste behandelt und kann mit @each verarbeitet werden. In diesem Beispiel wird padding: 20px; ausgegeben.

Rückgabe und Verarbeitung von Listen oder Maps

Funktionen können auch Listen (mit Leerzeichen oder Kommas getrennt) und Maps zurückgeben. Dies ist nützlich zur Rückgabe komplexer Werte.

 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}

• Die Funktion gibt eine Map zurück, und die Werte werden dann mit map.get abgerufen. Dies ermöglicht die Pflege eines konsistenten Abstands-Systems.

Funktionen mit Bedingungen und Schleifen

@if, @else if, @else, @for, @each und @while können alle in Funktionen verwendet werden. Sie können Berechnungslogik mit Bedingungen und Schleifen erstellen.

 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}

• Diese Funktion berechnet eine modulare Skala und multipliziert oder dividiert je nach positiven oder negativen Schritten. modular-scale(3, 1rem, 1.333) gibt eine Schriftgröße drei Stufen über der Basis zurück.

Fehlerbehandlung und Warnungen (@error, @warn)

Mit @error können Sie bei ungültigen Argumenten oder unerwarteten Vorgängen abbrechen und mit @warn Warnungen ausgeben. Der Zweck ist, Benutzer frühzeitig auf Probleme hinzuweisen.

 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// }

• Wenn Sie ungültige Werte übergeben, wird beim Build ein Fehler ausgegeben, sodass die Ursache leichter gefunden werden kann. Prüfungen innerhalb von Funktionen sind hilfreich zur frühzeitigen Fehlererkennung.

Erstellung farbspezifischer Funktionen

In SASS können Sie verschiedene Funktionen zur Farbmanipulation kombinieren, um Ihre eigene Farbpalette zu erstellen. Dies ist hilfreich, um ein konsistentes Farbschema im gesamten Projekt zu verwalten.

 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}

• In diesem Beispiel wird color.mix verwendet, um Farbtöne durch Mischen mit Schwarz und Aufhellungen durch Mischen mit Weiß zu erstellen. Die Werte werden in einer Liste zurückgegeben und können mit list.nth abgerufen werden.

Hinweise zu Performance und Kompilierungszeit

SASS-Funktionen werden zur Kompilierungszeit ausgewertet. Komplexe Schleifen, tiefe Rekursion oder umfangreiche Map-Operationen erhöhen die Kompilierungszeit. Halten Sie Funktionen klein und einfach; ziehen Sie es in Erwägung, komplexe Verarbeitungen außerhalb von SASS, z. B. in Build-Tools oder Präprozessoren, durchzuführen, wenn nötig.

Sammlung praktischer Hilfsfunktionen

Hier sind einige häufig verwendete Hilfsfunktionen. Der Code ist so gestaltet, dass er direkt in realen Projekten verwendbar ist.

 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 erzwingt obere und untere Grenzen für einen Wert, und px-to-rem konvertiert Pixelwerte in rem. Beide vereinfachen Prozesse, die im Responsive Design häufig auftreten.

Auswahl zwischen @function und Mixins (@mixin)

Funktionen sind auf die Rückgabe von Werten spezialisiert, während Mixins CSS-Blöcke ausgeben. Wenn das Ergebnis ein einzelner Eigenschaftswert ist, verwenden Sie eine Funktion; wenn es ein kompletter Style-Block ist, verwenden Sie ein Mixin.

 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}

• Funktionen geben Werte wie Zahlen oder Farben zurück, die in anderen Eigenschaften verwendet werden können, während Mixins direkt Eigenschaftsgruppen einfügen. Eine strikte Trennung im Design erhöht die Wartbarkeit.

Stringmanipulation und Überlegungen zur Ausgabeformatierung

Seien Sie vorsichtig beim Umgang mit Zahlen mit Einheiten und Strings in SASS. Das Anhängen eines Strings an eine Zahl mit Einheit kann zu unerwarteten Ausgaben führen. Verwenden Sie bei Bedarf unquote() oder String-Interpolation (#{}).

 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}

• Wenn Sie Prozentsätze als String zurückgeben, steuern Sie die Genauigkeit mithilfe von Interpolation oder round für bessere Übersichtlichkeit. Um Fehler zu vermeiden, behandeln Sie Datentypen beim Verketten von Berechnungsergebnissen und Strings immer eindeutig.

Best Practices für Tests und Dokumentation

Nachdem Sie eine Funktion geschrieben haben, erstellen Sie kleine SCSS-Dateien mit Anwendungsbeispielen als Tests, um die Wartung zu erleichtern. Sie können für jede Funktion den Typ/Eingabeeinheit, Rückgabetyp, Fehlerverhalten und Anwendungsbeispiele dokumentieren.

 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)";

• Kommentare mit kleinen Beispielen des 'erwarteten Ausgabewerts' erleichtern das Erkennen von Fehlern bei künftigen Refactorings. Automatisches Kompilieren in einer CI-Umgebung und das visuelle Überprüfen der Ausgabe ist effektiv.

Zusammenfassung

SASS-Funktionen sind eine leistungsstarke Möglichkeit, Wiederverwendbarkeit und Konsistenz im Stil zu verbessern. Gestalten Sie sie klein und einfach, und sorgen Sie mit @error und @warn für Sicherheit. Hilfsfunktionen für Farbe, Abstände und Einheitenumwandlung lassen sich bequem in einer gemeinsamen Bibliothek bündeln. Um Kompilierungsaufwand zu vermeiden, sollten Sie komplexe Prozesse bei Bedarf in andere Build-Schritte auslagern.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video