Mit CSS-Variablen lassen sich Werte einmal festlegen und überall verwenden. Anders als in einem Präprozessor leben sie im Browser weiter.
- CSS-Variablen (Custom Properties)
Selbst benannte Eigenschaften mit zwei Bindestrichen am Anfang, deren Wert sich über die Funktion var() abrufen lässt.
Beispiel: „Eine CSS-Variable vererbt sich wie jede andere Eigenschaft.“Auch: Custom Properties.
Wie sie aussehen
:root {
--farbe-primaer: #0078ff;
--abstand: 1.5rem;
}
.karte {
border-color: var(--farbe-primaer);
padding: var(--abstand);
}Gesetzt werden sie meist am Wurzelelement, damit sie überall gelten. Weil sie sich vererben, lassen sie sich für einen Teilbereich überschreiben: In einem dunklen Abschnitt bekommt der Container andere Werte, und alles darin folgt.
Der Unterschied zum Präprozessor
Variablen in Sass verschwinden beim Übersetzen, im ausgelieferten CSS steht der fertige Wert. CSS-Variablen bleiben: Sie lassen sich zur Laufzeit ändern, von JavaScript setzen und in Media Queries umschalten. Genau darauf beruhen die meisten Umsetzungen von hellem und dunklem Modus.