Anfänger122025-01-15

CSS Variables (Custom Properties) - Dynamische Werte

Lerne CSS Variables für wiederverwendbare Werte: --variable definieren, var() nutzen, :root, Scoping, Fallbacks und JavaScript-Integration.

#css#variables#custom-properties#css-variables#var

CSS Variables (Custom Properties)

CSS Variables (auch Custom Properties genannt) ermöglichen wiederverwendbare Werte in CSS. Perfekt für Themes, Design Systems und dynamische Styles!

Was sind CSS Variables?

Variables sind benannte Werte, die du überall wiederverwenden kannst:

Basis-Syntax
/* Variable definieren */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --spacing-md: 16px;
}

/* Variable nutzen */
.button {
    background-color: var(--primary-color);
    padding: var(--spacing-md);
}

Vorteile:

  • ✅ Zentrale Verwaltung (einmal ändern, überall aktuell)
  • ✅ Lesbarer Code (aussagekräftige Namen)
  • ✅ JavaScript-Integration (dynamisch änderbar)
  • ✅ Theming (Light/Dark Mode einfach)

Variable definieren

Mit zwei Bindestrichen --:

Variablen definieren
/* Am häufigsten: Im :root */
:root {
    --primary-color: #007bff;
    --font-family: 'Helvetica Neue', Arial, sans-serif;
    --border-radius: 8px;
    --transition-speed: 0.3s;
}

/* Auch in Elementen möglich */
.card {
    --card-padding: 20px;
    --card-bg: white;
}

Namenskonventionen:

  • Beginnt mit --
  • Kleinbuchstaben + Bindestriche
  • Aussagekräftige Namen

:root - Globale Variables

:root = HTML-Element (höchste Ebene):

:root für globale Variables
:root {
    /* Diese Variables sind überall verfügbar */
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;

    --text-color: #333;
    --bg-color: #fff;

    --font-size-base: 16px;
    --font-size-lg: 20px;
    --font-size-sm: 14px;

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    --border-radius: 8px;
    --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

var() - Variable nutzen

Mit var() auf Variables zugreifen:

var() Funktion
.button {
    background-color: var(--primary-color);
    color: white;
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    transition: all var(--transition-speed);
}

.button:hover {
    background-color: var(--primary-color-dark);
}

Fallback-Werte

Zweiter Parameter = Fallback falls Variable nicht definiert:

Fallback-Werte
.element {
    /* Wenn --primary-color nicht existiert → blau */
    color: var(--primary-color, blue);

    /* Mehrere Fallbacks verschachteln */
    color: var(--text-color, var(--fallback-color, black));

    /* Mit Berechnung */
    padding: var(--spacing-md, 16px);
}

Scoping - Variable-Geltungsbereich

Variables haben Scope (Gültigkeitsbereich):

Variable Scoping
:root {
    --color: blue;  /* Global */
}

.container {
    --color: red;  /* Nur in .container und Kindern */
}

/* Verwendung */
body {
    color: var(--color);  /* blau */
}

.container {
    color: var(--color);  /* rot */
}

.container .child {
    color: var(--color);  /* rot (erbt von .container) */
}

Wichtig: Variables werden vererbt an Kinder!

Berechnungen mit calc()

Variables in calc() nutzen:

calc() mit Variables
:root {
    --spacing-base: 8px;
}

.element {
    /* Berechnungen */
    padding: calc(var(--spacing-base) * 2);  /* 16px */
    margin: calc(var(--spacing-base) * 3);   /* 24px */
    width: calc(100% - var(--spacing-base) * 2);
}

/* Responsive Spacing */
:root {
    --container-padding: 20px;
}

@media (min-width: 768px) {
    :root {
        --container-padding: 40px;
    }
}

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

Design System mit Variables

Vollständiges Design System:

Design System
:root {
    /* === COLORS === */
    /* Brand */
    --color-primary: #007bff;
    --color-primary-light: #66a3ff;
    --color-primary-dark: #0056b3;

    --color-secondary: #6c757d;
    --color-secondary-light: #adb5bd;
    --color-secondary-dark: #495057;

    /* Semantic */
    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-warning: #ffc107;
    --color-info: #17a2b8;

    /* Neutral */
    --color-text: #212529;
    --color-text-light: #6c757d;
    --color-bg: #ffffff;
    --color-bg-light: #f8f9fa;
    --color-border: #dee2e6;

    /* === TYPOGRAPHY === */
    --font-family-base: 'Inter', -apple-system, system-ui, sans-serif;
    --font-family-heading: 'Inter', sans-serif;
    --font-family-mono: 'Fira Code', monospace;

    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-sm: 0.875rem;  /* 14px */
    --font-size-base: 1rem;    /* 16px */
    --font-size-lg: 1.125rem;  /* 18px */
    --font-size-xl: 1.25rem;   /* 20px */
    --font-size-2xl: 1.5rem;   /* 24px */
    --font-size-3xl: 2rem;     /* 32px */

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* === SPACING === */
    --spacing-xs: 0.25rem;  /* 4px */
    --spacing-sm: 0.5rem;   /* 8px */
    --spacing-md: 1rem;     /* 16px */
    --spacing-lg: 1.5rem;   /* 24px */
    --spacing-xl: 2rem;     /* 32px */
    --spacing-2xl: 3rem;    /* 48px */
    --spacing-3xl: 4rem;    /* 64px */

    /* === BORDERS === */
    --border-width: 1px;
    --border-radius-sm: 4px;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-full: 9999px;

    /* === SHADOWS === */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.2);

    /* === TRANSITIONS === */
    --transition-fast: 150ms;
    --transition-base: 300ms;
    --transition-slow: 500ms;
    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);

    /* === Z-INDEX === */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
}

Komponenten mit Variables

Button Komponente
.button {
    /* Variables nutzen */
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius);
    border: var(--border-width) solid transparent;
    transition: all var(--transition-base) var(--transition-timing);
    cursor: pointer;
}

.button-primary {
    background-color: var(--color-primary);
    color: white;
}

.button-primary:hover {
    background-color: var(--color-primary-dark);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.button-secondary {
    background-color: var(--color-secondary);
    color: white;
}

.button-outline {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.button-lg {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-lg);
}

.button-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
}

Dark Mode mit Variables

Theme-Switching perfekt mit Variables:

Dark Mode
/* Light Mode (Default) */
:root {
    --color-bg: #ffffff;
    --color-text: #212529;
    --color-border: #dee2e6;
    --card-bg: #ffffff;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #1a1a1a;
        --color-text: #f8f9fa;
        --color-border: #495057;
        --card-bg: #2d2d2d;
    }
}

/* Oder mit Klasse (per JavaScript toggle) */
[data-theme="dark"] {
    --color-bg: #1a1a1a;
    --color-text: #f8f9fa;
    --color-border: #495057;
    --card-bg: #2d2d2d;
}

/* Styles nutzen Theme-Variables */
body {
    background-color: var(--color-bg);
    color: var(--color-text);
}

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--color-border);
}

JavaScript-Integration

Variables mit JavaScript dynamisch ändern:

JavaScript + CSS Variables
/* CSS */
:root {
    --primary-color: #007bff;
    --theme-hue: 210;
}

.element {
    background-color: var(--primary-color);
    color: hsl(var(--theme-hue), 100%, 50%);
}

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

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

// Variable entfernen
root.style.removeProperty('--primary-color');

// Theme-Switcher
function setTheme(theme) {
    if (theme === 'dark') {
        root.style.setProperty('--color-bg', '#1a1a1a');
        root.style.setProperty('--color-text', '#f8f9fa');
    } else {
        root.style.setProperty('--color-bg', '#ffffff');
        root.style.setProperty('--color-text', '#212529');
    }
}

// Dynamische Farbe
function setAccentColor(hue) {
    root.style.setProperty('--theme-hue', hue);
}

Praktische Beispiele

Beispiel 1: Spacing-System

Konsistentes Spacing
:root {
    --spacing-unit: 8px;
    --spacing-xs: calc(var(--spacing-unit) * 0.5);  /* 4px */
    --spacing-sm: var(--spacing-unit);              /* 8px */
    --spacing-md: calc(var(--spacing-unit) * 2);    /* 16px */
    --spacing-lg: calc(var(--spacing-unit) * 3);    /* 24px */
    --spacing-xl: calc(var(--spacing-unit) * 4);    /* 32px */
}

.card {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    gap: var(--spacing-sm);
}

Beispiel 2: Responsive Variables

Responsive Typography
:root {
    --font-size-base: 14px;
    --container-padding: 20px;
}

@media (min-width: 768px) {
    :root {
        --font-size-base: 16px;
        --container-padding: 40px;
    }
}

@media (min-width: 1024px) {
    :root {
        --font-size-base: 18px;
        --container-padding: 60px;
    }
}

body {
    font-size: var(--font-size-base);
}

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

Beispiel 3: Component Variants

Card mit Variants
.card {
    /* Default Variables */
    --card-bg: white;
    --card-border: #dee2e6;
    --card-padding: var(--spacing-md);

    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: var(--card-padding);
    border-radius: var(--border-radius);
}

.card-success {
    --card-bg: #d4edda;
    --card-border: #28a745;
}

.card-danger {
    --card-bg: #f8d7da;
    --card-border: #dc3545;
}

.card-large {
    --card-padding: var(--spacing-lg);
}

Browser-Support

CSS Variables werden von allen modernen Browsern unterstützt:

  • ✅ Chrome 49+
  • ✅ Firefox 31+
  • ✅ Safari 9.1+
  • ✅ Edge 15+
  • ❌ IE 11 (nicht unterstützt)

Fallback für IE:

IE Fallback
.element {
    /* IE Fallback */
    color: #007bff;

    /* Moderne Browser mit Variable */
    color: var(--primary-color);
}

Best Practices

✅ DO:

  1. :root für globale Variables
  2. Aussagekräftige Namen (--primary-color statt --blue)
  3. Design System aufbauen (Farben, Spacing, etc.)
  4. Fallback-Werte für kritische Properties
  5. Calc() für Berechnungen
  6. Theme-Switching mit Variables
  7. Namenskonventionen einhalten

❌ DON'T:

  1. Nicht zu viele Variables (nur was wirklich wiederverwendet wird)
  2. Keine kryptischen Namen (--c1, --x)
  3. Nicht überall !important
  4. Nicht ohne Planung (erst Design System, dann Variables)
  5. Nicht IE unterstützen müssen ohne Fallback

Debugging

Variables debuggen
/* In DevTools */
/* 1. Element inspizieren */
/* 2. "Computed" Tab */
/* 3. Variables sehen + ändern */

/* Temporär zum Debuggen */
:root {
    --debug-color: red;
}

.element {
    border: 2px solid var(--debug-color) !important;
}

📝 Quiz

Wo sollte man globale CSS Variables definieren?

📝 Quiz

Was macht var(--color, blue)?

⚡

Tipps & Tricks

JavaScript + CSS Variables für Interaktivität

Dynamische Theming mit JavaScript:

// Theme-Farbe ändern
document.documentElement.style.setProperty('--primary-color', '#ff6b6b');

// Von User-Input lesen
const hueInput = document.getElementById('hue');
hueInput.addEventListener('input', (e) => {
    document.documentElement.style.setProperty('--theme-hue', e.target.value);
});

:root {
    --theme-hue: 220;
}

.button {
    background: hsl(var(--theme-hue), 70%, 50%);
}

Scoped Variables für Komponenten-Varianten

Nutze lokale Variables für Component Variations:

.button {
    --button-bg: var(--color-primary);
    --button-color: white;

    background: var(--button-bg);
    color: var(--button-color);
}

.button-success {
    --button-bg: var(--color-success);
}

.button-danger {
    --button-bg: var(--color-danger);
}

Responsive Variables statt Media Queries

Variables in Media Queries ändern:

:root {
    --spacing: 1rem;
    --font-size: 16px;
}

@media (min-width: 768px) {
    :root {
        --spacing: 1.5rem;
        --font-size: 18px;
    }
}

/* Komponenten nutzen automatisch responsive Werte */
.card {
    padding: var(--spacing);
    font-size: var(--font-size);
}

calc() mit CSS Variables

Kombiniere Variables mit Berechnungen:

:root {
    --base-spacing: 8px;
    --header-height: 60px;
}

.content {
    padding-top: calc(var(--header-height) + var(--base-spacing) * 2);
    margin-bottom: calc(var(--base-spacing) * 3);
}

Übungsaufgaben

Aufgabe 1: Design System

Erstelle ein Design System mit:

  • 5 Brand-Farben
  • 5 Spacing-Werte
  • 3 Schriftgrößen
  • Alle in :root

Aufgabe 2: Dark Mode

Implementiere Dark Mode:

  • Variables für Farben
  • Toggle zwischen Light/Dark
  • Mit @media (prefers-color-scheme)

Aufgabe 3: Button System

Erstelle Buttons mit Variables:

  • 3 Varianten (primary, secondary, outline)
  • 3 Größen (sm, md, lg)
  • Nutze Variables für alles

Nächste Schritte

Du kennst jetzt:

  • ✅ CSS Variables definieren (--name)
  • ✅ Variables nutzen (var())
  • ✅ :root für globale Variables
  • ✅ Fallback-Werte
  • ✅ Scoping & Vererbung
  • ✅ calc() mit Variables
  • ✅ JavaScript-Integration
  • ✅ Dark Mode & Theming

Als Nächstes lernst du:

  • Pseudo-Classes (:hover, :focus, :nth-child)
  • Pseudo-Elements (::before, ::after)
  • Advanced Selectors

Weiter so! 🚀

← CSS•Lektion 12 von 16
75% abgeschlossen
Lektion abgeschlossen!

Gut gemacht! 🎉

Du hast "CSS Variables (Custom Properties) - Dynamische Werte" abgeschlossen

Vorherige Lektion
CSS Media Queries - Responsive Design
Nächste Lektion
CSS Pseudo-Classes - :hover, :focus, :nth-child & mehr
Alle Lektionen anzeigen

Artikel bewerten

0.0 (0 Bewertungen)

Bitte einloggen um zu bewerten

Das könnte dich auch interessieren

CSS Backgrounds & Borders - Hintergründe & Rahmen stylen

Lerne alles über CSS Backgrounds (Farben, Bilder, Gradients) und Borders (border-radius, box-shadow) für modernes Design.

Anfängercss

CSS Basics - Deine Seite gestalten

Lerne, wie du mit CSS deine HTML-Seiten zum Leben erweckst. Farben, Schriftarten, Layouts - alles was du für schöne Webseiten brauchst.

Anfängercss

CSS Box Model - margin, padding, border verstehen

Lerne das CSS Box Model verstehen: Content, Padding, Border, Margin und den Unterschied zwischen box-sizing: content-box und border-box.

Anfängercss
Zurück zu CSS