⏱️ Leestijd: ca. 4 min.

Sass Mixins & Includes: Herbruikbare CSS-Logica

Wanneer je een grotere website ontwerpt, merk je dat je bepaalde CSS-patronen steeds opnieuw blijft schrijven. Denk aan het centreren van een element met Flexbox, het maken van een mooie schaduw, of de opmaak van knoppen. Telkens dezelfde 4 of 5 regels CSS typen is niet alleen tijdrovend, het maakt je code ook gevoelig voor fouten.

In Sass/SCSS lossen we dit op met Mixins en Includes. Hiermee bundel je een hele verzameling CSS-eigenschappen in één herbruikbaar blok dat je overal in je stylesheet kunt oproepen.

1. Wat is een Mixin?

Een mixin is een herbruikbaar stukje SCSS-code. Je maakt een mixin aan met het commando @mixin en roept deze vervolgens op op de plek waar je de stijlen nodig hebt met @include.

Syntaxis:

// 1. Mixin definiëren
@mixin mixin-naam {
    // CSS-eigenschappen
}

// 2. Mixin gebruiken
.element {
    @include mixin-naam;
}

Praktijkvoorbeeld: Flexbox Centrering

Stel dat je regelmatig een element exact in het midden van zijn container wilt plaatsen:

// Definitie van de mixin
@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

// Toepassing op verschillende elementen
.hero-banner {
    height: 400px;
    @include flex-center;
}

.modal-header {
    padding: 1rem;
    @include flex-center;
}

Gecompileerde CSS:

.hero-banner {
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-header {
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

2. Mixins met Argumenten (Parameters)

Een mixin wordt pas écht krachtig als je er argumenten (parameters) aan meegeeft. Daarmee maak je de mixin dynamisch: de structuur blijft hetzelfde, maar de waarden (zoals kleur, grootte of randen) veranderen per toepassing.

Syntaxis:

@mixin mixin-naam($parameter1, $parameter2) {
    eigenschap-1: $parameter1;
    eigenschap-2: $parameter2;
}

Voorbeeld: Dynamische Vierkanten

// Mixin die breedte, hoogte en achtergrondkleur instelt
@mixin vierkant($grootte, $kleur) {
    width: $grootte;
    height: $grootte;
    background-color: $kleur;
}

// Toepassing
.avatar {
    @include vierkant(50px, #2563eb);
    border-radius: 50%;
}

.thumbnail {
    @include vierkant(120px, #10b981);
}

3. Standaardwaarden (Default Values)

Soms wil je een parameter wel aanpasbaar maken, maar heeft 80% van de gevallen dezelfde waarde. Je kunt parameters daarom een standaardwaarde meegeven. Als je het argument bij @include weglaat, pakt Sass automatisch de standaardwaarde!

// $bg en $padding hebben een standaardwaarde gekregen
@mixin card-style($bg: #ffffff, $padding: 1.5rem) {
    background-color: $bg;
    padding: $padding;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

// 1. Gebruikt de standaardwaarden (wit en 1.5rem)
.card-standaard {
    @include card-style;
}

// 2. Overschrijft alleen de achtergrondkleur
.card-donker {
    @include card-style(#1f2937);
}

// 3. Overschrijft zowel achtergrond als padding
.card-compact {
    @include card-style(#f3f4f6, 0.75rem);
}
Tip: Plaats parameters mét standaardwaarden achteraan in je mixin-definitie. Zo hoef je ze niet verplicht mee te geven wanneer je de mixin oproept.

4. Benoemde Argumenten (Named Arguments)

Heeft je mixin meerdere parameters en wil je er slechts één specifieke aanpassen zonder alle voorgaande argumenten in te vullen? Gebruik dan benoemde argumenten.

@mixin knop-stijl($kleur: #2563eb, $tekstkleur: #ffffff, $hoeken: 6px) {
    background-color: $kleur;
    color: $tekstkleur;
    border-radius: $hoeken;
    border: none;
    padding: 0.5rem 1rem;
}

.btn-aangepast {
    // We veranderen ALLEEN de hoeken, de rest blijft de standaardwaarde!
    @include knop-stijl($hoeken: 20px);
}

5. Praktijkvoorbeeld: Een Responsieve Knop-Component

Laten we alles wat we geleerd hebben samenbrengen in een realistisch SCSS-component voor knoppen.

SCSS Code:

// 1. Variabelen
$color-primary: #2563eb;
$color-danger: #ef4444;

// 2. Mixin definitie
@mixin btn-base($bg-color: $color-primary, $text-color: #ffffff, $radius: 8px) {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: $bg-color;
    color: $text-color;
    border-radius: $radius;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s ease;

    &:hover {
        background-color: darken($bg-color, 10%);
    }
}

// 3. Toepassing in BEM-stijl
.btn {
    @include btn-base; // Standaard blauwe knop

    &--danger {
        @include btn-base($bg-color: $color-danger); // Rode knop
    }

    &--pill {
        @include btn-base($radius: 50px); // Ronde pil-knop
    }
}

6. Oefening: Bouw je eigen Mixin Library

In deze opdracht ga je een eigen verzameling van 3 slimme mixins maken en toepassen op een verzameling UI-elementen.

Stappenplan

  1. Maak een nieuw project aan met een index.html en een SCSS-bestand (style.scss).
  2. Maak in je SCSS-bestand minstens de volgende 3 mixins aan:
3. Schrijf HTML-code met een simpele layout met daarin: 4. Pas je mixins toe in SCSS op de juiste HTML-elementen.
  1. Compileer je SCSS-code naar CSS en controleer de werking in de browser.

Verwachte Output

Een net gecompileerde webpagina waarop alle elementen hun styling krijgen vanuit jouw mixins. De CSS-code bevat geen foutmeldingen en maakt optimaal gebruik van de parameters.

Evaluatiecriteria