Bedingte Anweisungen in SASS

Dieser Artikel erklärt bedingte Anweisungen in SASS.

Wir erklären verständlich alles von den Grundlagen bis zu fortgeschrittenen Einsatzmöglichkeiten von bedingten Anweisungen mit den Direktiven @if, @else if und @else – mit praktischen Beispielen.

YouTube Video

Bedingte Anweisungen in SASS

SASS ist eine Stylesheet-Sprache, die CSS erweitert; mit Bedingungen lassen sich Styles flexibel steuern. In SASS können Sie mit @if, @else if und @else die Ausgabe von Styles zur Kompilierzeit umschalten.

Grundlegende Syntax für Bedingungen

Einfache Bedingungen in SASS werden mit der folgenden Syntax geschrieben.

1@if condition {
2  // Code executed when the condition is true
3} @else if condition {
4  // Code executed when another condition is true
5} @else {
6  // Code executed when all conditions are false
7}

• @if prüft die erste Bedingung; ist sie falsch, werden der Reihe nach die Blöcke @else if bzw. @else ausgewertet.

Einfaches Beispiel für eine Bedingung

Im folgenden Beispiel wechselt die Hintergrundfarbe abhängig von der Variable $theme.

 1$theme: "dark";
 2
 3body {
 4  @if $theme == "dark" {
 5    background-color: #333;
 6    color: #fff;
 7  } @else if $theme == "light" {
 8    background-color: #fff;
 9    color: #000;
10  } @else {
11    background-color: #f0f0f0;
12    color: #333;
13  }
14}

Kompiliertes CSS

1body {
2  background-color: #333;
3  color: #fff;
4}

• Wenn $theme den Wert "dark" hat, werden ein dunkler Hintergrund und weiße Textfarbe angewendet.

Bedingungen mit Berechnungen kombinieren

Bedingungen decken nicht nur Zeichenketten- und Farbvergleiche ab, sondern auch numerische Berechnungen.

1$width: 1200px;
2
3.container {
4  @if $width > 1000px {
5    max-width: 1200px;
6  } @else {
7    max-width: 800px;
8  }
9}

Kompiliertes CSS

1.container {
2  max-width: 1200px;
3}

• Numerische Vergleiche sind ebenfalls möglich, und wenn $width 1000px überschreitet, wird max-width: 1200px ausgegeben.

Verschachtelte Bedingungen

Durch das Verschachteln von Bedingungen lassen sich komplexe Bedingungen abbilden.

 1$theme: "dark";
 2$size: "large";
 3
 4button {
 5  @if $theme == "dark" {
 6    background-color: #000;
 7    color: #fff;
 8
 9    @if $size == "large" {
10      padding: 20px;
11    } @else {
12      padding: 10px;
13    }
14  } @else {
15    background-color: #fff;
16    color: #000;
17
18    @if $size == "large" {
19      padding: 15px;
20    } @else {
21      padding: 8px;
22    }
23  }
24}

Kompiliertes CSS

1button {
2  background-color: #000;
3  color: #fff;
4  padding: 20px;
5}

• Verschachtelte Bedingungen ermöglichen ein Styling, das sowohl auf dem Theme als auch auf der Größe basiert.

Bedingungen in benutzerdefinierten Funktionen verwenden

Der Einsatz von Bedingungen in benutzerdefinierten Funktionen kann die Wiederverwendbarkeit verbessern.

 1@function adjust-color($theme) {
 2  @if $theme == "dark" {
 3    @return #333;
 4  } @else if $theme == "light" {
 5    @return #fff;
 6  } @else {
 7    @return #ccc;
 8  }
 9}
10
11.card {
12  background-color: adjust-color("dark");
13}

Kompiliertes CSS

1.card {
2  background-color: #333;
3}

• Indem Sie Bedingungen in Funktionen kapseln, erhöhen Sie Wiederverwendbarkeit und Wartbarkeit.

Praktisches Beispiel – Designs umschalten

Schauen wir uns ein Beispiel an, bei dem das Gesamtdesign anhand bestimmter Bedingungen umgeschaltet wird.

 1$theme: "light";
 2
 3body {
 4  font-family: Arial, sans-serif;
 5
 6  @if $theme == "dark" {
 7    background-color: #121212;
 8    color: #e0e0e0;
 9  } @else if $theme == "light" {
10    background-color: #f9f9f9;
11    color: #333;
12  } @else {
13    background-color: #fff;
14    color: #000;
15  }
16}
17
18header {
19  @if $theme == "dark" {
20    border-bottom: 1px solid #333;
21  } @else {
22    border-bottom: 1px solid #ccc;
23  }
24}

Kompiliertes CSS

1body {
2  font-family: Arial, sans-serif;
3  background-color: #f9f9f9;
4  color: #333;
5}
6
7header {
8  border-bottom: 1px solid #ccc;
9}

• Sie können das Farbschema der gesamten Seite dynamisch entsprechend der Theme-Variable umschalten.

Hinweise und Best Practices

Bei der Verwendung von SASS-Bedingungen können Sie die folgenden Punkte berücksichtigen.

1. Bedingungen einfach halten

   Komplexe Verschachtelungen beeinträchtigen die Lesbarkeit; der Einsatz von Funktionen und Mixins hilft, die Dinge einfach zu halten.

2. Mit Variablen und Funktionen abstrahieren

   Wenn Sie ähnliche Bedingungen an mehreren Stellen verwenden, verbessert das Auslagern in Variablen oder Funktionen die Wartbarkeit.

3. Aufgeblähte Logik vermeiden

   Vereinheitlichen Sie Designregeln so weit wie möglich und vermeiden Sie einen übermäßigen Einsatz von Bedingungen.

Fazit

Bedingungen in SASS sind ein sehr effektives Werkzeug, um flexible, dynamische Styles zu erstellen. Hier haben wir Schritt für Schritt alles von den Grundlagen bis hin zu praktischen Beispielen erklärt. Wenn Sie in realen Projekten Bedingungen einsetzen, entwerfen Sie mit wiederverwendbarem Code im Hinterkopf und achten Sie darauf, die Dinge nicht zu verkomplizieren.

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