CSS-Variablen

CSS-Variablen, auch benutzerdefinierte Eigenschaften genannt, ermöglichen es, Werte zu speichern und innerhalb der Stylesheets wiederzuverwenden. Dadurch wird der Code wartbarer, sauberer und flexibler.

Wie funktionieren CSS-Variablen?

Variablen sollten im <:root>-Selektor deklariert werden, sodass sie im gesamten Dokument verfügbar sind. Mit der Funktion <var()> können sie in verschiedenen Stilen verwendet werden.

Das folgende Beispiel zeigt, wie man CSS-Variablen für Hintergrundfarbe und Padding deklariert und verwendet.

Mehrere Variablen und Wiederverwendung

Wir können mehrere Variablen gleichzeitig definieren, zum Beispiel Farben für verschiedene Buttons. Dies erleichtert das Theme-Management und sorgt für Design-Konsistenz.

Im nächsten Beispiel speichern wir zwei Farben in Variablen, die verschiedenen Buttons zugewiesen werden.

Tipps zu CSS-Variablen

CSS-Variablen bieten eine flexible Lösung für die Verwaltung von Stylesheets. Hier einige nützliche Tipps:

• Deklariere globale Variablen immer im <:root>, damit sie überall verfügbar sind.
• Gib den Variablen aussagekräftige Namen, damit der Code leicht verständlich bleibt.
• Verwende Variablen für Farbschemata und Größen, um das Design schnell anpassen zu können.