Lädt...

CSS-Variablen

Filter haben Pixel verändert. Custom Properties (CSS-Variablen) verbessern die Wartung: ein --brand auf :root, viele Buttons lesen var(--brand) — Token einmal ändern, die UI folgt. Sie kaskadieren und vererben wie normale Eigenschaften, nur die Namen legst du fest.

Eigene Namen: `--token`

Sieht aus wie eine Deklaration, der Name beginnt mit zwei Bindestrichen:

Globale Design-Tokens auf :root

css

:root {
--brand: #2563eb;
--brand-contrast: #ffffff;
--surface: #f8fafc;
--text: #0f172a;
--radius-md: 0.5rem;
--space-3: 0.75rem;
}

:root ist der Dokumentwurzel-Knoten — üblich für site-weite Tokens. Auf jedem Selektor kannst du --names setzen; Nachfahren erben, bis näher überschrieben wird.

Werte mit `var()` lesen

Primary-Button an Tokens

css

.btn-primary {
background: var(--brand);
color: var(--brand-contrast);
border: none;
border-radius: var(--radius-md);
padding: var(--space-3) calc(var(--space-3) * 1.5);
font: inherit;
cursor: pointer;
}

.btn-primary:hover {
background: color-mix(in srgb, var(--brand) 88%, black);
}

Fokus: Tokens + var(). Namen im Projekt konsistent halten.

Fallback in `var()`

Fallback wenn Token fehlt

css

.card {
background: var(--surface, #ffffff);
color: var(--text, #111827);
border-radius: var(--radius-md, 8px);
box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));
}

Der zweite Parameter ist Backup bei fehlendem/ungültigem Token — Tippfehler im Namen bleiben trotzdem falsch.

Scope und lokale Overrides

📊 Wo Custom Properties hin

Scope	Typischer Selektor	Wann
Globale Tokens	`:root`	Markenfarben, Abstands-Skala
Komponenten-Theme	`.card`, `.alert`	Muster-Defaults
Variante	`.card.is-warning`	Wenige Tokens tauschen
Runtime	`[data-theme="dark"]`	Palette wechseln, gleiche `var(--surface)`-Namen

Overrides nah am Element setzen. :root betrifft alles — manchmal gewollt, manchmal reicht lokales --accent.

Lokaler Accent auf einer Card

Card-Subtree mit eigenem Accent

css

.card {
--accent: var(--brand);
background: var(--surface);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
border-radius: var(--radius-md);
padding: var(--space-3);
}

.card.is-featured {
--accent: #7c3aed;
}

.card__title {
color: var(--accent);
}

Nur --accent ändert sich in .is-featured — Titel und Rand folgen über var().

Theme ohne jede Regel zu duplizieren

Hell default, dunkel per data-theme

css

:root {
--surface: #f8fafc;
--text: #0f172a;
--brand: #2563eb;
}

[data-theme="dark"] {
--surface: #0f172a;
--text: #e2e8f0;
--brand: #60a5fa;
}

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

JS kann dataset.theme setzen — Tokens ändern sich live. Sass-$ kann das im Browser nicht.

Custom Properties vs. Sass `$`

Sass verschwindet beim Build; --tokens leben in der Kaskade im Browser.

Selbst ausprobieren

Fünf Tokens auf :root; Button nur mit var().
--accent auf .card + .is-featured.
Token entfernen + Fallback testen.
[data-theme="dark"] in DevTools toggeln.
Wiederholtes #2563eb durch var(--brand) ersetzen.

Typische Fehler

brand: statt --brand:
var() als Eigenschaftsname
Tippfehler ohne Fallback
Variablen ersetzen nicht Specificity-Verständnis

Kurz

--name definieren; var(--name, fallback) nutzen
:root global; lokal auf Komponenten überschreiben
Nächstes Modern Toolkit: calc

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓

Fragen

🎯

70%

Zum Bestehen

♾️

∞

Zeit

🔄

∞

Versuche

📝 Anweisungen

Lesen Sie jede Frage sorgfältig
Wählen Sie die beste Antwort für jede Frage
Sie können das Quiz so oft wiederholen, wie Sie möchten
Ihr Fortschritt wird oben angezeigt

Sprache