CSS-Variablen: Einmal definieren, überall benutzen

vom 21.02.2019 von Oliver Misch

CSS-Variablen (offiziell: Custom Properties) speichern Werte unter selbstgewählten Namen. Statt denselben Blauton an dreißig Stellen zu wiederholen, definierst du ihn einmal und verweist überall darauf. Eine Änderung, ein Ort, fertig.

Syntax und Beispiel

CSS-Code

:root {
    --titelblau: #000082;
    --abstand: 16px;
}

h2 {
    color: var(--titelblau);
    margin-bottom: var(--abstand);
}

.knopf {
    background: var(--titelblau);
}

Variablennamen beginnen mit zwei Bindestrichen, abgerufen werden sie mit var(). Definiert man sie im Selektor :root (dem html-Element), gelten sie auf der ganzen Seite. Genau so ist die style.css dieses Wikis aufgebaut: Fenstergrau, Titelblau, Linkfarben, alles Variablen ganz oben in der Datei. Wer daraus ein Wiki in Beige machen wollte, bräuchte eine Minutte.

Vererbung und lokales Überschreiben

.warnbox {
    --titelblau: #CC0000;   /* hier drin ist "blau" mal rot */
}

Variablen vererben sich an Kindelemente und lassen sich lokal überschreiben: Innerhalb der .warnbox liefert var(--titelblau) dann Rot, alle Regeln die die Variable benutzen ziehen automatisch mit. Auf diesem Mechanismus bauen ganze Farbschemata auf, ein Dunkelmodus ist damit im Kern ein Block der ein paar Variablen neu belegt, gern kombiniert mit der Media Query prefers-color-scheme aus dem letzten Kapitel.

Fallback nicht vergessen

color: var(--akzent, #008080);

Der zweite Parameter von var() ist der Ersatzwert, falls die Variable nicht definiert ist. Bei Tippfehlern im Namen schlägt die Regel sonst einfach lautlos fehl, der Browser wirft keinen Fehler sondern ignoriert die Eigenschafft.

Typische Fehler

• Variablen außerhalb eines Selektors definieren. Auch :root braucht seine geschweiften Klammern.
• Namen kryptisch wählen (--c1, --c2). In drei Monaten weiß niemand mehr was c2 war, sprechende Namen wie --link oder --warn-bg kosten nichts.
• Nur die halbe Palette als Variablen pflegen und den Rest hart codieren, dann verliert das System seinen Witz.

Weiter im Lernpfad: Animationen · Verwandt: Farben