⏱️ Leestijd: ca. 4 min.

Sass Variabelen: Bouwstenen voor een Flexibel Design System

Wanneer je een webproject ontwerpt, gebruik je bepaalde elementen steeds opnieuw: de primaire merkkleur, het standaard lettertype, en consistente marges tussen onderdelen. In standaard CSS moest je vroeger elke kleurcode of waarde op tientallen plekken handmatig herhalen. Wijzigde de huisstijl? Dan kon je alle stylesheets regel voor regel langs.

Met Sass Variabelen los je dit definitief op! Je slaat een waarde op één centrale plek op en hergebruikt deze doorheen je hele stylesheet.

1. Wat is een Sass Variabele?

Een variabele in Sass/SCSS is een "bewaardoosje" voor een waarde. Je herkent een Sass-variabele altijd aan het dollarteken ($) aan het begin van de naam.

Syntaxis:

$variabele-naam: waarde;
Belangrijk: Sass-variabelen worden tijdens het build-proces (compilatie) vervangen door hun werkelijke waarde. De uiteindelijke CSS-file die de browser leest, bevat dus de hardgecodeerde waarden op de juiste plekken.

2. De Drie Pijlers van een Design System

Om een strakke en professionele layout te bouwen, maken we in SCSS variabelen aan voor drie hoofdelementen: kleuren, typografie en spatiëring.

A. Kleuren ($color-primary)

Geef je variabelen een functionele naam in plaats van een kleurnaam. Gebruik dus liever $color-primary in plaats van $blauw. Mocht de primaire kleur later groen worden, dan hoef je de variabelenaam nergens aan te passen!

// Kleurvariabelen
$color-primary: #2563eb;
$color-secondary: #10b981;
$color-dark: #1f2937;
$color-light: #f3f4f6;

B. Typografie ($font-main)

Lettertypen en font-stacks leg je eenvoudig vast in variabelen. Zo garandeer je consistentie over je hele website.

// Typografie
$font-main: 'Inter', system-ui, -apple-system, sans-serif;
$font-heading: 'Poppins', sans-serif;
$font-size-base: 1rem;

C. Spatiëring ($spacing-unit)

Door te werken met een basisunit (bijvoorbeeld 1rem of 16px) voor margins en paddings, creëer je een strak visueel ritme. Met Sass-variabelen kun je ook direct wiskundige berekeningen maken!

// Spatiëring
$spacing-unit: 1rem; // Basisunit van 16px

// Afgeleide spatiëring via berekeningen
$spacing-sm: $spacing-unit * 0.5; // 0.5rem (8px)
$spacing-md: $spacing-unit;       // 1rem (16px)
$spacing-lg: $spacing-unit * 2;   // 2rem (32px)

3. Praktijkvoorbeeld: Een Card Component

Laten we zien hoe we $color-primary, $font-main en $spacing-unit combineren in een SCSS-bestand.

SCSS Code:

// 1. Variabelen definiëren
$color-primary: #2563eb;
$color-bg: #ffffff;
$color-text: #1f2937;
$font-main: 'Inter', sans-serif;
$spacing-unit: 1.5rem;

// 2. Toeplassen in SCSS
body {
    font-family: $font-main;
    color: $color-text;
    background-color: #f3f4f6;
}

.card {
    background-color: $color-bg;
    padding: $spacing-unit;
    border-top: 4px solid $color-primary;
    border-radius: 8px;
    margin-bottom: $spacing-unit;

    &__title {
        color: $color-primary;
        margin-bottom: $spacing-unit * 0.5;
    }

    &__text {
        line-height: 1.6;
    }
}

Gecompileerde CSS (wat de browser leest):

body {
    font-family: 'Inter', sans-serif;
    color: #1f2937;
    background-color: #f3f4f6;
}

.card {
    background-color: #ffffff;
    padding: 1.5rem;
    border-top: 4px solid #2563eb;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.card__title {
    color: #2563eb;
    margin-bottom: 0.75rem;
}

.card__text {
    line-height: 1.6;
}

4. Best Practices voor Sass Variabelen

  1. Gebruik functionele namen: Kies $color-primary in plaats van $blue en $color-danger in plaats van $red.
  2. Maak een centraal variabelenbestand: In grotere projecten zet je alle variabelen in een apart deelfilename (bijvoorbeeld _variables.scss).
  3. Reken met de basisunit: Vermenigvuldig je $spacing-unit om consistente verhoudingen te behouden in plaats van willekeurige pixelwaarden te kiezen.
Tip: Vraag jezelf bij het aanmaken van een variabele af: "Als de klant vraagt om de huisstijl aan te passen, kan ik dat dan met één regel code regelen?" Zo ja, dan is je variabele goed gekozen!

5. Opdracht: Je eigen Design Tokens aanmaken

In deze opdracht ga je een verzameling variabelen ("Design Tokens") opzetten en toepassen op een actieknop (call-to-action).

Stappenplan

  1. Open je SCSS-bestand (style.scss).
  2. Maak bovenaan het bestand de volgende variabelen aan:
3. Maak een .btn-klasse waarin je: 4. Voeg een :hover-status toe waarin de rand of tekstkleur veranderd wordt met $color-accent.

Verwachte Output

Een werkende knop waarvan de complete vormgeving wordt aangestuurd door jouw Sass-variabelen. Wanneer je de waarde van $color-primary of $spacing-unit bovenaan verandert, past de complete knop zich automatisch aan.

Evaluatiecriteria