SASS-Variablen

Dieser Artikel erklärt SASS-Variablen.

Wir geben eine detaillierte Erklärung zu SASS-Variablen und lernen ihre tatsächliche Anwendung Schritt für Schritt.

YouTube Video

SASS-Variablen

SASS ist eine CSS-Erweiterungssprache, mit der Sie CSS flexibler und effizienter schreiben können. Zu den Funktionen gehören Variablen, die ein leistungsstarkes Werkzeug sind, um Stil-Konsistenz zu bewahren und Änderungen zu erleichtern.

Was sind SASS-Variablen?

SASS-Variablen bieten eine Möglichkeit, Werte wie Farben, Schriftgrößen und Abstände, die häufig in CSS verwendet werden, zentral zu speichern und zu verwalten.

Durch die Verwendung von Variablen können Sie Stile einfach ändern und die Lesbarkeit des Codes verbessern.

Wie man Variablen schreibt

Variablen können wie folgt geschrieben werden.

1// Variable syntax
2//$variable-name: value;
3$primary-color: #3498db;

• Der Variablenname muss mit dem $-Symbol beginnen.
• Variablenname ist der Name der Variable. Es wird empfohlen, einen klaren und beschreibenden Namen zu wählen.
• Wert ist der Wert, der der Variable zugewiesen wird.

Grundlegende Verwendung von Variablen

Unten ist ein einfaches Beispiel für eine SASS-Variable.

 1// Variable definition
 2$primary-color: #3498db;
 3$secondary-color: #2ecc71;
 4$base-font-size: 16px;
 5
 6// Variable usage
 7body {
 8    font-size: $base-font-size;
 9    color: $primary-color;
10    background-color: $secondary-color;
11}

• Sobald Sie eine Variable wie $primary-color definiert haben, können Sie denselben Wert beliebig oft wiederverwenden.
• Wenn Sie einen Wert ändern, müssen Sie nur die Variable anpassen, was die Wartbarkeit erhöht.

Erzeugtes CSS-Ausgabe

1body {
2    font-size: 16px;
3    color: #3498db;
4    background-color: #2ecc71;
5}

Verwendung von Variablen in Verschachtelungen

Die Kombination von SASS-Verschachtelungen und Variablen hilft, Ihren Code zu organisieren und die Verwaltung zu erleichtern.

 1@use "sass:color";
 2
 3// Variable definition
 4$button-bg: #e74c3c;
 5$button-color: #fff;
 6$button-padding: 10px 20px;
 7
 8.button {
 9    background-color: $button-bg;
10    color: $button-color;
11    padding: $button-padding;
12
13    &:hover {
14        background-color: color.adjust($button-bg, $lightness: -10%);
15    }
16}

• Sie können Variablen innerhalb verschachtelter Selektoren verwenden.
• Durch das Kombinieren von Variablen können Sie ein flexibles Styling erreichen, zum Beispiel indem Sie eine Farbe mit der Funktion color.adjust um 10 % abdunkeln.

Erzeugtes CSS-Ausgabe

1.button {
2    background-color: #e74c3c;
3    color: #fff;
4    padding: 10px 20px;
5}
6
7.button:hover {
8    background-color: #c0392b;
9}

Variablen mit Standardwerten

In SASS können Sie Standardwerte für Variablen festlegen. Das Festlegen von Standardwerten ermöglicht es, Variablen zu verwenden, ohne bestehende zu überschreiben.

1// Set default value
2$font-size: 14px !default;
3
4// Define the variable in another file
5$font-size: 16px;
6
7p {
8    font-size: $font-size;
9}

• Durch das Hinzufügen von !default wird die Variable nicht überschrieben, wenn sie bereits definiert wurde.
• Dies ist besonders nützlich bei der Team-Entwicklung oder für projektweite Einstellungen.

Erzeugtes CSS-Ausgabe

1p {
2    font-size: 16px;
3}

Gültigkeitsbereich von Variablen

SASS-Variablen haben einen Gültigkeitsbereich, und ihre Verfügbarkeit hängt vom Ort ihrer Definition ab. Das Verstehen des Gültigkeitsbereichs hilft, unbeabsichtigtes Überschreiben von Variablen zu vermeiden.

1. Globaler Gültigkeitsbereich

1$global-color: #ff6347;
2
3.header {
4    color: $global-color;
5}

• Variablen im globalen Gültigkeitsbereich sind in der gesamten Datei verfügbar.

2. Lokaler Gültigkeitsbereich

1.card {
2    $card-bg: #f0f0f0;
3    background-color: $card-bg;
4}
5
6.button {
7    // Error: $card-bg cannot be used
8    background-color: $card-bg;
9}

• Variablen im lokalen Gültigkeitsbereich sind nur innerhalb einer bestimmten Verschachtelung oder Datei verfügbar.

Verwendung von Variablen in Berechnungen

SASS-Variablen können auch in Berechnungen verwendet werden. Berechnungen können auch mit werten mit Einheiten und Farben durchgeführt werden.

 1@use "sass:color";
 2
 3$base-padding: 10px;
 4$double-padding: $base-padding * 2;
 5
 6.container {
 7    padding: $double-padding;
 8}
 9
10$main-color: #3498db;
11$lighter-color: color.adjust($main-color, $lightness: 20%);
12
13h1 {
14    color: $lighter-color;
15}

Erzeugtes CSS-Ausgabe

1.container {
2    padding: 20px;
3}
4
5h1 {
6    color: #5dade2;
7}

• Die Verwendung von Variablen für Farbkorrekturen oder Abstandsberechnungen erhöht die Wartbarkeit.

Zusammenfassung

SASS-Variablen sind ein wesentliches Feature für effizientes CSS-Management und Wartung.

Durch die Verwendung von SASS-Variablen bleiben Stile im gesamten Projekt konsistent und Änderungen werden erleichtert.

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