CSS: variabelen

CSS Custom Properties (ook bekend als CSS Variables) maken het mogelijk om herbruikbare waarden te definiëren die door je hele stylesheet gebruikt kunnen worden. Ze bieden dynamische styling mogelijkheden en maken onderhoud van grote codebases veel eenvoudiger.

Basis syntax

Declareren van Variables

/* Globale variables in :root */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --text-color: #333333;
  --background-color: #ffffff;
  --border-radius: 8px;
  --spacing-unit: 1rem;
  --font-size-large: 2rem;
  --transition-duration: 0.3s;
}

/* Lokale variables in specifieke selectors */
.card {
  --card-padding: 1.5rem;
  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Gebruiken van Variables

.button {
  background-color: var(--primary-color);
  color: var(--text-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-unit);
  transition: all var(--transition-duration);
}

/* Met fallback waarden */
.element {
  color: var(--text-color, #000000);         /* Fallback naar zwart */
  margin: var(--margin, 1rem);               /* Fallback naar 1rem */
  font-size: var(--font-size, 16px);         /* Fallback naar 16px */
}

Scope en Cascade

Global Variables

:root {
    /* Beschikbaar in hele document */
    --global-primary: #3498db;
    --global-secondary: #2ecc71;
    --global-spacing: 1rem;
}

/* Kan overal gebruikt worden */
.any-element {
    color: var(--global-primary);
}

Local Variables

.component {
    /* Alleen beschikbaar binnen .component en child elements */
    --local-bg: #f8f9fa;
    --local-text: #495057;
    
    background: var(--local-bg);
    color: var(--local-text);
}

.component .child {
    /* Kan parent variables gebruiken */
    border-color: var(--local-text);
}

.outside-component {
    /* Dit werkt NIET - variable niet in scope */
    color: var(--local-bg); /* Fallback of invalid waarde */
}

Variable overerving

.parent {
    --inherited-color: red;
    --inherited-size: 20px;
}

.child {
    /* Erft variables van parent */
    color: var(--inherited-color);        /* red */
    font-size: var(--inherited-size);     /* 20px */
    
    /* Kan ook overschrijven */
    --inherited-color: blue;
}

.grandchild {
    /* Krijgt overschreven waarde */
    color: var(--inherited-color);        /* blue */
}