10.1 Deklaration von Variablen
Variablen in CSS, auch bekannt als benutzerdefinierte Eigenschaften (CSS Custom Properties), erlauben es Entwicklern, Werte von Eigenschaften an einer Stelle zu speichern und sie im Dokument wiederzuverwenden. Das macht CSS flexibler und handhabbarer, besonders bei großen Projekten.
Deklaration von Variablen
Variablen in CSS werden mit zwei Bindestrichen (--) vor dem Variablennamen deklariert. Normalerweise werden sie innerhalb des Selektors :root deklariert, um sie im gesamten Dokument verfügbar zu machen.
Syntax:
:root {
--variablen-name: wert;
--variablen-name: wert;
}
Beispiel:
In diesem Beispiel werden drei Variablen deklariert: --main-color, --secondary-color, und --font-size.
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
10.2 Verwendung von Variablen
Um Variablen zu verwenden, wird die Funktion var() eingesetzt, die den Namen der Variablen als Argument nimmt.
Syntax:
selektor {
eigenschaft: var(--variablen-name);
eigenschaft: var(--variablen-name);
}
Beispiel:
Dieses Beispiel verwendet die zuvor deklarierten Variablen, um den Hintergrund, die Textfarbe und die Schriftgröße des <body>-Elements zu stylen.
body {
background-color: var(--main-color);
color: var(--secondary-color);
font-size: var(--font-size);
}
10.3 Vererbung und Überschreibung von Variablen
CSS-Variablen werden entlang der Hierarchie der Elemente vererbt. Das bedeutet, dass wenn eine Variable in einem Element deklariert ist, sie auch für seine Kindelemente zugänglich ist. Variablen können auch innerhalb anderer Selektoren überschrieben werden.
Beispiel:
In diesem Beispiel überschreibt das Element .header die Variable --main-color, und diese neue Variable wird nur auf ihn angewendet. Gleichzeitig verwendet das Element .footer den in :root deklarierten Variablenwert.
<div class="header">Header</div>
<div class="footer">Footer</div>
:root {
--main-color: #3498db;
}
.header {
--main-color: #e74c3c;
background-color: var(--main-color);
}
.footer {
background-color: var(--main-color);
}
10.4 Vorteile der Verwendung von CSS-Variablen
1. Vereinfachung der Stilverwaltung:
Variablen erlauben es, den Wert einer Eigenschaft an einer Stelle zu ändern, und diese Änderung wird automatisch auf alle Stellen angewendet, an denen diese Variable verwendet wird. Das ist besonders nützlich für die Themenerstellung und die Aufrechterhaltung eines konsistenten Stils.
2. Verbesserung der Lesbarkeit und Wartung des Codes:
Die Verwendung von Variablen macht den CSS-Code lesbarer und verständlicher, da sie zur Beschreibung von Werten, wie Farben und Größen, verwendet werden können, die eine semantische Bedeutung haben können (zum Beispiel --main-color statt #3498db).
3. Dynamische Aktualisierung von Styles:
Variablen können dynamisch mit JavaScript geändert werden, was es ermöglicht, interaktivere und dynamischere Benutzeroberflächen zu erstellen.
GO TO FULL VERSION