Variablen
Custom Properties machen Design-Entscheidungen zentral änderbar: Farben, Abstände und Radien leben an einer Stelle.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
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.
:root {
--primary: #0f766e;
--radius: 8px;
}
.button {
background: var(--primary);
border-radius: var(--radius, 4px);
}Überschreiben und Themes
Variablen vererben sich.
Eine Klasse weiter unten im Baum kann sie überschreiben.
So funktionieren Dark Mode und Modul-Themes: dieselben Regeln, andere Variablenwerte.
:root {
--bg: #ffffff;
--text: #18202f;
}
.dark {
--bg: #0b1220;
--text: #e2e8f0;
}
body {
background: var(--bg);
color: var(--text);
}Vertiefung
Custom Properties sind vererbte Werte
Custom Properties beginnen mit -- und vererben sich durch den DOM-Baum. Auf :root definierte Tokens sind global, eine Klasse kann sie für einen Teilbaum überschreiben.
var(--token, fallback) liefert einen Ersatzwert, wenn die Variable fehlt. Für Themes reicht es, die Tokens neu zu setzen — die Regeln darunter bleiben unverändert.
:root {
--bg: #ffffff;
--text: #18202f;
--accent: #0f766e;
}
.dark {
--bg: #0b1220;
--text: #e2e8f0;
--accent: #5eead4;
}
body {
background: var(--bg);
color: var(--text);
}Merksatz: Tokens zentral definieren, lokal überschreiben. Themes werden dadurch zu einem Datenaustausch, nicht zu dupliziertem CSS.
Übungsaufgabe
Design-Tokens für ein Theme
Definiere Tokens für Hintergrund, Text, Akzent und Radius. Baue daraus eine Karte und überschreibe die Tokens in einer Dark-Klasse.
Das soll dein Programm können
- :root mit mindestens vier Tokens
- var() mit einem Fallback
- Karte nutzt nur Tokens für Farbe und Radius
- .dark überschreibt die Tokens
- Kein hart codierter Farbwert in der Kartenregel
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Die Karte sollte background: var(--bg) und color: var(--text) verwenden. Der Fallback steht nach dem Komma: var(--radius, 0.5rem).
Lösung anzeigen
:root {
--bg: #ffffff;
--surface: #f8fafc;
--text: #18202f;
--accent: #0f766e;
--radius: 0.75rem;
}
.card {
background: var(--surface, var(--bg));
color: var(--text);
border: 1px solid var(--accent);
border-radius: var(--radius, 0.5rem);
padding: 1rem;
}
.dark {
--bg: #0b1220;
--surface: #111c2e;
--text: #e2e8f0;
--accent: #5eead4;
}Warum funktioniert das?
Die Karte kennt keine konkreten Farben, nur Tokens. Die Dark-Klasse tauscht die Werte im Teilbaum aus, ohne eine einzige Kartenregel zu duplizieren.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Eine Karte gestalten
Gestalte eine Karte mit Bild, Titel, Text und Button. Ändere anschließend nur die Schriftgröße im Browser und prüfe, ob sie stabil bleibt.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.