Die Verwendung von Variablen in CSS, auch bekannt als benutzerdefinierte Eigenschaften, ermöglicht das Speichern eines bestimmten Werts, der an verschiedenen Stellen im Stylesheet verwendet werden kann. Hier ist, wie man sie verwendet:
1. Erstellen einer Variablen: Die Syntax zum Erstellen einer CSS-Variablen besteht aus zwei Teilen: Name und Wert. Der Name, auch bekannt als benutzerdefinierte Eigenschaft, beginnt immer mit zwei Bindestrichen (—), gefolgt vom benutzerdefinierten Namen, und der Wert ist der Inhalt, den Sie speichern möchten.
Beispiel: ```css :root { —main-color: #306998; —secondary-color: #ffd700; } ``` Im obigen Beispiel haben wir zwei Variablen: main-color und secondary-color mit den entsprechenden Werten.2. Verwendung der Variablen: Nachdem die Variablen erstellt wurden, können Sie diese Werte später durch die Funktion var() abrufen.
Beispiel: ```css body { background-color: var(—main-color); color: var(—secondary-color); } ``` Im obigen Beispiel werden die Hintergrundfarbe und die Schriftfarbe des Elements body mithilfe der erstellten Variablen gesetzt.Beachten Sie, dass Variablen in CSS normalerweise im :root-Selektor deklariert werden. Das bedeutet, dass sie global sind und auf der gesamten Website verwendet werden können. Sie können jedoch auch innerhalb spezifischer Elemente für eine lokale Anwendung definiert werden.
