CSS Variablen

CSS Custom Properties (Variablen)

:root {
  --color-primary: #2563eb;
  --color-text: #1f2937;
  --spacing-md: 16px;
  --radius-default: 8px;
}

.btn {
  background-color: var(--color-primary);
  padding: var(--spacing-md);
  border-radius: var(--radius-default);
}

.card {
  border-radius: var(--radius-default);
  color: var(--color-text);
}

:root = das <html>-Element - Variablen dort sind global verfügbar
Namenskonvention: --kebab-case
Zugriff immer über var(--name)

Warum Variablen? Wartbarkeit!

Ohne Variablen - Farbe an 5 Stellen ändern:

.btn { background-color: #2563eb; }
.link { color: #2563eb; }
.badge { border-color: #2563eb; }
.icon { fill: #2563eb; }
.header { background-color: #2563eb; }

Mit Variablen - Farbe an 1 Stelle ändern:

:root { --color-primary: #2563eb; }

.btn { background-color: var(--color-primary); }
.link { color: var(--color-primary); }
.badge { border-color: var(--color-primary); }
.icon { fill: var(--color-primary); }
.header { background-color: var(--color-primary); }

→ Ändert man --color-primary, aktualisiert sich alles automatisch.

Fallback-Werte für Variablen

.card {
  /* Falls --card-padding nicht definiert ist, nutze 16px als Fallback */
  padding: var(--card-padding, 16px);
}

Praxisbeispiel: Ein kleines Design-System als Startpunkt für die Übung

:root {
  /* Farben */
  --color-bg: #ffffff;
  --color-text: #1f2937;
  --color-primary: #2563eb;

  /* Abstände (Spacing-Skala) */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;

  /* Typografie */
  --font-body: "Inter", sans-serif;
  --font-size-base: 1rem;
}