CSS

Variablen

Custom Properties machen Design-Entscheidungen zentral änderbar: Farben, Abstände und Radien leben an einer Stelle.

Definieren und lesen

Custom Properties beginnen mit zwei Bindestrichen und werden meist auf :root definiert.

var() liest den Wert und akzeptiert einen Fallback, falls die Variable fehlt.

<--variable><var()><:root>

Design-Tokens

:root {
  --primary: #0f766e;
  --radius: 8px;
}

.button {
  background: var(--primary);
  border-radius: var(--radius, 4px);
}

Variablen vererben sich. Eine Klasse weiter unten im Baum kann sie überschreiben.

So funktionieren Dark Mode und Modul-Themes: dieselben Regeln, andere Variablenwerte.

Dark Theme

:root {
  --bg: #ffffff;
  --text: #18202f;
}

.dark {
  --bg: #0b1220;
  --text: #e2e8f0;
}

body {
  background: var(--bg);
  color: var(--text);
}

Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.