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.

Der Praxis-Klassiker: das Farbthema

Wie mächtig Variablen sind, zeigt sich beim Umfärben: Ein komplettes Farbthema wechselt mit wenigen Zeilen, weil alle Regeln auf dieselben Variablen zeigen:

:root {
    --akzent: #008080;
    --papier: #FFFFFF;
    --tinte: #222222;
}
.dunkelmodus {
    --akzent: #4DB6AC;
    --papier: #1A1A1A;
    --tinte: #EEEEEE;
}

Eine Klasse am body genügt, und jede Regel die var(--papier) benutzt, folgt automatisch, das ist die Grundtechnik hinter Hell-Dunkel-Umschaltern. Ohne Variablen hieße derselbe Wechsel: jede Farbangabe im ganzen Stylesheet doppelt pflegenn.

Rückfallwerte für alle Fälle

var() nimmt einen zweiten Parameter als Sicherheitsnetz: color: var(--tinte, black) greift auf black zurück, falls die Variable nirgends definiert ist. Das schützt bei Tippfehlern im Variablennamen und macht Bausteine wiederverwendbar, die auch außerhalb ihres Farbthemas funktionieren sollen. Bei den Variablen dieses Wikis (wirf einen Blick in die style.css, die Palette steht ganz oben in :root) verzichten wir darauf, alles ist zentral definiert, aber in größeren Projekten mit mehreren Stylesheets ist der Rückfallwert guter Tonn.

Weiter im Lernpfad: Animationen · Verwandt: Farben