Die `if`-Funktion in SASS

Dieser Artikel erklärt die if-Funktion in SASS.

Wir gehen alles Schritt für Schritt durch, von den Grundlagen der if-Funktion bis hin zu fortgeschrittenen Techniken.

YouTube Video

Die if-Funktion in SASS

Die Funktion if() ist eine einfache von SASS bereitgestellte bedingte Funktion, die abhängig von einer booleschen Bedingung einen von zwei Werten zurückgibt. Sie ähnelt dem ternären Operator in JavaScript.

Syntax

Die Syntax ist wie folgt:.

1// if(condition, trueValue, falseValue)

• Ist condition wahr, wird trueValue zurückgegeben; ist sie falsch, wird falseValue zurückgegeben.

Grundlegende Verwendung

Mit der Funktion if() können Sie beispielsweise Hintergrund- und Textfarben je nachdem ändern, ob das Theme dunkel oder hell ist.

Beispielcode

1$theme: "dark";
2
3$background-color: if($theme == "dark", black, white);
4$text-color: if($theme == "dark", white, black);
5
6body {
7  background-color: $background-color;
8  color: $text-color;
9}

• Ist die Variable $theme "dark", wird der Hintergrund schwarz mit weißem Text; ist sie "light", wird der Hintergrund weiß mit schwarzem Text.

Das generierte CSS

1body {
2  background-color: black;
3  color: white;
4}

• Da die Variable $theme "dark" ist, ist der Hintergrund schwarz mit weißem Text.

Unterschiede zwischen der @if-Anweisung und der if()-Funktion

Sass stellt für bedingte Verzweigungen eine @if-Anweisung und eine if()-Funktion bereit, die jedoch für unterschiedliche Zwecke verwendet werden.

Beispielcode

 1$theme: "dark";
 2
 3// `@if` statement: Compile-time branching (syntax level)
 4$background-color: null;
 5@if $theme == "dark" {
 6  $background-color: black;
 7} @else if $theme == "light" {
 8  $background-color: white;
 9} @else {
10  $background-color: gray;
11}
12
13// `if()` function: Returns a value (expression level)
14$text-color: if($theme == "dark", white, black);
15
16body {
17  background-color: $background-color;
18  color: $text-color;
19}

• Die @if-Anweisung steuert, welcher Code beim Kompilieren von Sass ausgegeben wird.
• Im Gegensatz dazu gibt die if()-Funktion einen Wert zurück und wird verwendet, um Werte innerhalb von Ausdrücken dynamisch umzuschalten.

Das generierte CSS

1body {
2  background-color: black;
3  color: white;
4}

• In diesem Beispiel wird, da $theme "dark" ist, ein schwarzer Hintergrund und eine weiße Textfarbe angewendet.
• Die beiden wichtigsten Unterschiede sind, dass die @if-Anweisung die Struktur steuert und die if()-Funktion einen Wert zurückgibt.

Verschachtelte if-Funktionen

Wenn komplexere Verzweigungen nötig sind, können Sie if-Funktionen verschachteln.

Beispielcode

 1$theme: "custom";
 2$custom-color: blue;
 3
 4$background-color: if(
 5  $theme == "dark",
 6  black,
 7  if(
 8    $theme == "light",
 9    white,
10    $custom-color
11  )
12);
13
14body {
15  background-color: $background-color;
16}

• Ist $theme "dark", wird Schwarz zurückgegeben; bei "light" wird Weiß zurückgegeben; andernfalls wird der Standardwert ($custom-color) zurückgegeben.

Das generierte CSS

1body {
2  background-color: blue;
3}

• Da die Variable $theme den Wert custom hat, ist die Hintergrundfarbe blau.

Praktische Anwendungsfälle

Theme-Wechsel

Nachfolgend ein Beispiel, das die Schaltflächenstile je nach Theme ändert.

1$theme: "dark";
2
3.button {
4  background-color: if($theme == "dark", #333, #fff);
5  color: if($theme == "dark", #fff, #333);
6  border: 1px solid if($theme == "dark", #444, #ccc);
7}

• Dieser Code ist ein SASS-Beispiel für bedingte Logik, das die Hintergrund-, Text- und Rahmenfarben einer Schaltfläche abhängig vom Wert der Variable $theme umschaltet. Die Funktion if() wird verwendet, um Stile für dunkle und helle Themes dynamisch festzulegen.

Das generierte CSS

1.button {
2  background-color: #333;
3  color: #fff;
4  border: 1px solid #444;
5}

• Durch das Umschalten des Themes können Sie das Gesamtdesign einheitlich ändern.

Fortgeschrittenes Beispiel: Dynamisches Festlegen des Farbkontrasts

Sehen wir uns ein Beispiel an, das die Textfarbe automatisch anhand der Hintergrundfarbe festlegt.

Beispielcode

 1@use "sass:color";
 2
 3$background-color: #000;
 4
 5$text-color: if(
 6  color.channel($background-color, "lightness", $space: hsl) > 50%,
 7  black,
 8  white
 9);
10
11body {
12  background-color: $background-color;
13  color: $text-color;
14}

• Die Funktion color.channel() wird verwendet, um die Helligkeit (lightness) der Hintergrundfarbe zu ermitteln. Ist dieser Wert größer als 50%, wird Schwarz gewählt; ist er kleiner, wird Weiß als Textfarbe gewählt, wodurch der Kontrast zum Hintergrund automatisch optimiert wird.

Das generierte CSS

1body {
2  background-color: #000;
3  color: white;
4}

• Durch die Verwendung der if()-Funktion können Sie flexible Stile umsetzen, die Aspekte der Barrierefreiheit im Design berücksichtigen, etwa die Anpassung des Kontrasts.

Kombination mit @function

Die Verwendung der if-Funktion innerhalb einer @function ermöglicht eine noch flexiblere Stilgestaltung.

Beispielcode

 1@function theme-color($theme, $type) {
 2  @return if(
 3    $theme == "dark",
 4    if(
 5      $type == "background",
 6      black,
 7      white
 8    ),
 9    if(
10      $type == "background",
11      white,
12      black
13    )
14  );
15}
16
17body {
18  background-color: theme-color("dark", "background");
19  color: theme-color("dark", "text");
20}

• Dieser Code demonstriert die Verwendung von if() innerhalb einer @function, um je nach Theme und Farbtyp geeignete Farben zurückzugeben. Dies ermöglicht eine konsistente und wiederverwendbare Stilgestaltung für jedes Theme.

Das generierte CSS

1body {
2  background-color: black;
3  color: white;
4}

• Durch das Erstellen und Verwenden von Hilfsfunktionen, die die if()-Funktion nutzen, können Sie die Wartbarkeit des gesamten Projekts verbessern.

Notizen

1. Die if-Funktion kann nicht mit dynamischen Werten verwendet werden Da CSS selbst eine statische Sprache ist, bestimmt die if-Funktion die Werte bereits beim Kompilieren von SASS. Für bedingte Logik zur Laufzeit müssen Sie JavaScript verwenden.

2. Lesbarkeit hat Vorrang Da verschachtelte if-Funktionen komplex werden und die Lesbarkeit beeinträchtigen können, können Sie bei Bedarf die SASS-Direktiven @mixin und @function verwenden, um Ihren Code zu strukturieren.

Fazit

Die if-Funktion von SASS ist ein leistungsfähiges Werkzeug, das je nach Bedingungen unterschiedliche Werte zurückgibt. Sie ist nicht nur für einfache Bedingungen nützlich, sondern auch in vielen Szenarien wie Theme-Wechsel und dynamischen Stileinstellungen. Bei komplexen Bedingungen sollten Sie jedoch auf die Lesbarkeit achten und @mixin sowie @function nutzen, um die Wartbarkeit zu verbessern.

Durch das Beherrschen der if-Funktion erreichen Sie eine effizientere und flexiblere Stilgestaltung.

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