CSS Custom Properties: Variablen im Stylesheet

CSS-Variablen machen Stylesheets wartbarer und flexibler. Farben, Abstände und andere Werte zentral definieren und überall verwenden.

Grundlagen

Definition

/* Variablen mit -- definieren */
:root {
  --primary-color: #3b82f6;
  --secondary-color: #10b981;
  --text-color: #1f2937;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --border-radius: 8px;
  --font-family: 'Inter', sans-serif;
}

Verwendung

/* Mit var() verwenden */
.button {
  background: var(--primary-color);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius);
  font-family: var(--font-family);
}

.card {
  border: 1px solid var(--secondary-color);
  padding: var(--spacing-lg);
}

Fallback-Werte

/* Fallback wenn Variable nicht existiert */
.element {
  color: var(--undefined-color, #000);
  padding: var(--spacing, 1rem);
}

/* Verkettete Fallbacks */
.element {
  color: var(--theme-color, var(--primary-color, blue));
}

Scope und Vererbung

/* Global (auf :root) */
:root {
  --color: blue;
}

/* Lokal überschreiben */
.dark-section {
  --color: lightblue;
}

/* Komponenten-spezifisch */
.card {
  --card-padding: 1rem;
  --card-bg: white;

  padding: var(--card-padding);
  background: var(--card-bg);
}

.card.featured {
  --card-padding: 2rem;
  --card-bg: #f0f9ff;
}

Dark Mode mit CSS-Variablen

:root {
  /* Light Mode (Standard) */
  --bg-color: #ffffff;
  --text-color: #1f2937;
  --border-color: #e5e7eb;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1f2937;
    --text-color: #f9fafb;
    --border-color: #374151;
  }
}

/* Oder mit Klasse */
.dark {
  --bg-color: #1f2937;
  --text-color: #f9fafb;
}

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

Theming-System

/* Theme-Variablen */
:root {
  /* Farbpalette */
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --green-500: #10b981;
  --red-500: #ef4444;

  /* Semantische Variablen */
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-success: var(--green-500);
  --color-error: var(--red-500);

  /* Komponenten-Tokens */
  --button-bg: var(--color-primary);
  --button-bg-hover: var(--color-primary-hover);
}

/* Alternative Themes */
.theme-green {
  --color-primary: var(--green-500);
}

.button {
  background: var(--button-bg);
}

.button:hover {
  background: var(--button-bg-hover);
}

Mit JavaScript ändern

// Variable lesen
const root = document.documentElement;
const primaryColor = getComputedStyle(root)
  .getPropertyValue('--primary-color');

// Variable setzen
root.style.setProperty('--primary-color', '#ff0000');

// Auf Element setzen
element.style.setProperty('--card-bg', '#f0f0f0');

// Variable entfernen (zurück zum geerbten Wert)
root.style.removeProperty('--primary-color');

Theme-Switcher

function setTheme(theme) {
  const root = document.documentElement;

  if (theme === 'dark') {
    root.style.setProperty('--bg-color', '#1f2937');
    root.style.setProperty('--text-color', '#f9fafb');
  } else {
    root.style.setProperty('--bg-color', '#ffffff');
    root.style.setProperty('--text-color', '#1f2937');
  }

  localStorage.setItem('theme', theme);
}

// Beim Laden
const savedTheme = localStorage.getItem('theme') || 'light';
setTheme(savedTheme);

Berechnungen mit calc()

:root {
  --base-size: 16px;
  --scale: 1.25;
}

h1 {
  /* Berechnung mit Variablen */
  font-size: calc(var(--base-size) * var(--scale) * var(--scale) * var(--scale));
}

h2 {
  font-size: calc(var(--base-size) * var(--scale) * var(--scale));
}

.sidebar {
  --sidebar-width: 250px;
  width: var(--sidebar-width);
}

.main {
  width: calc(100% - var(--sidebar-width));
}

Responsive Variablen

:root {
  --container-padding: 1rem;
  --heading-size: 1.5rem;
}

@media (min-width: 768px) {
  :root {
    --container-padding: 2rem;
    --heading-size: 2rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-padding: 3rem;
    --heading-size: 2.5rem;
  }
}

.container {
  padding: var(--container-padding);
}

h1 {
  font-size: var(--heading-size);
}

Best Practices

CSS-Variablen vs. Sass-Variablen

Weitere Informationen

• 🎨 CSS Flexbox
• 📐 CSS Grid
• 📱 Responsive Design