Extend & Overerving (`@extend` & `%`-placeholders)

Wanneer je een uitgebreide website of webapplicatie bouwt, zie je vaak dat verschillende elementen op elkaar lijken. Denk aan notificatieblokken (succes, waarschuwing, fout) of verschillende soorten knoppen. Ze delen allemaal dezelfde basisopmaak (zoals padding, afgeronde hoeken en typografie), maar hebben een andere accentkleur.

In plaats van deze basiseigenschappen steeds opnieuw te typen of dubbele HTML-klassen te gebruiken, past een SCSS-expert overerving (inheritance) toe. In deze les leer je hoe je met @extend en placeholder selectors (%) herhaling voorkomt en schone, efficiënte CSS genereert.

1. Wat is Overerving met `@extend`?

Met het commando @extend kan een CSS-selector alle stijlen 'erven' van een andere CSS-selector. Dit volgt het bekende DRY-begrip (Don't Repeat Yourself).

Een eenvoudig voorbeeld:

Stel dat we een basisklasse .btn hebben en een specifieke variant .btn-primary.

// SCSS Code
.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: bold;
    text-align: center;
    border: none;
}

.btn-primary {
    @extend .btn; // Erft alle stijlen van .btn over
    background-color: #2563eb;
    color: #ffffff;
}

Wat genereert de Sass-compiler in CSS?

In plaats van de CSS-code te dupliceren, groepeert Sass de selectors slim met een komma:

/* Gegenereerde CSS */
.btn, .btn-primary {
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: bold;
    text-align: center;
    border: none;
}

.btn-primary {
    background-color: #2563eb;
    color: #ffffff;
}

Het voordeel in HTML: In je HTML hoef je nu alleen nog class="btn-primary" te schrijven, in plaats van de dubbele klasse class="btn btn-primary".

2. Placeholder Selectors (`%`)

Hoewel @extend .btn prima werkt, heeft het één nadeel: de klasse .btn verschijnt zélf ook in je gecompileerde CSS-bestand. Als je de generieke klasse .btn in HTML nooit los gebruikt, is dat 'spookcode' die je bestand onnodig groot maakt.

Hiervoor heeft Sass Placeholder Selectors bedacht. Een placeholder herken je aan het procentteken (%) aan het begin van de naam.

Hoe werkt een `%`-placeholder?

Een placeholder is een onzichtbare bouwsteen. Het bestand genereert op zichzelf géén CSS-output, totdat je er ergens in je SCSS naar verwijst met @extend.

// SCSS met een Placeholder Selector
%badge-base {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 4px;
    text-transform: uppercase;
}

// Toepassen van de placeholder
.badge-success {
    @extend %badge-base;
    background-color: #10b981;
    color: #ffffff;
}

.badge-warning {
    @extend %badge-base;
    background-color: #f59e0b;
    color: #000000;
}

Gecompileerde CSS Output:

Look how clean! De naam %badge-base is nergens meer terug te vinden in CSS. De CSS-regels zijn netjes samengevoegd:

.badge-success, .badge-warning {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 4px;
    text-transform: uppercase;
}

.badge-success {
    background-color: #10b981;
    color: #ffffff;
}

.badge-warning {
    background-color: #f59e0b;
    color: #000000;
}

Tip: Gebruik voor puur overkoepelende patronen (zoals basisstructuren) ALTIJD een %-placeholder in plaats van een normale .klasse.

3. `@extend` vs. `@mixin`: Wanneer gebruik je wat?

Het is heel normaal om te twijfelen tussen een Mixin en een Extend. Beide helpen je herhaling te voorkomen, maar ze doen dat op een volstrekt andere manier.

Eigenschap	`@mixin`	`@extend` (met `%`)
Doel	Dynamische code genereren met argumenten/parameters.	Identieke statische CSS-eigenschappen delen.
Parameters	JA (accepteert variabelen).	NEE (accepteert géén argumenten).
CSS-Output	Dupliceert de CSS-regels in elke selector.	Groepeert de selectors met komma's (`.a, .b`).
Wanneer gebruiken?	Als de waarden (kleuren, maten) veranderen per toepassing.	Als de CSS-code exact 100% hetzelfde blijft.

// GOED GEBRUIK VAN EEN MIXIN: waarden veranderen via argumenten
@mixin grid-kolom($breedte) {
    width: $breedte;
    float: left;
}

// GOED GEBRUIK VAN EXTEND: de basisstijl is 100% identiek
%card-skelet {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

Belangrijk: Overdrijf het gebruik van @extend niet! Als je selectors uit heel verschillende delen van je project aan elkaar gaat koppelen met @extend, kan de gegenereerde CSS onoverzichtelijk worden. Gebruik @extend vooral voor elementen die logisch verwant zijn (zoals knoppen, kaarten of meldingen).

4. Praktijkvoorbeeld: Een Notificatiesysteem

Laten we een realistisch notificatiesysteem maken met een %-placeholder en specifieke meldingstypes.

// 1. Maak de onzichtbare basis met een placeholder
%alert {
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border-left: 5px solid;
    border-radius: 4px;
    font-family: system-ui, sans-serif;
}

// 2. Erf de basis over en voeg specifieke stijlen toe
.alert-info {
    @extend %alert;
    background-color: #eff6ff;
    border-color: #3b82f6;
    color: #1e40af;
}

.alert-danger {
    @extend %alert;
    background-color: #fef2f2;
    border-color: #ef4444;
    color: #991b1b;
}

.alert-success {
    @extend %alert;
    background-color: #f0fdf4;
    border-color: #22c55e;
    color: #166534;
}

5. Oefening: Bouw een UI-Card Componenten Systeem

In deze opdracht ga je de geleerde overervingstechnieken toepassen door een schaalbare verzameling van UI Cards op te bouwen.

Stappenplan

Maak een projectmap aan genaamd opdracht-extend met een index.html en een SCSS-bestand (style.scss).
Maak in je SCSS-bestand een placeholder selector aan genaamd %card-base.

Geef deze basiskaart: een padding van 1.5rem, een border-radius van 12px, een subtiele box-shadow en een transition voor hover-effecten.

3. Maak minstens drie verschillende card-varianten aan die gebruikmaken van @extend %card-base;:

.card-standard: een neutrale witte kaart met een subtiele rand.
.card-featured: een opvallende kaart met een gekleurde achtergrond en witte tekst.
.card-product: een productkaart met een hover-effect (transform: translateY(-5px)).

4. Maak een tweede placeholder selector genaamd %btn-reset om standaard knopinstellingen te strippen (border: none, background: none, cursor: pointer, etc.).

Pas %btn-reset toe op minstens twee actie-knoppen binnen je kaarten.
Schrijf in index.html de bijbehorende HTML-code om de drie kaarten en knoppen netjes op het scherm te tonen.
Compileer style.scss naar style.css en controleer de werking in de browser.

Verwachte Output

Een overzichtelijke HTML-pagina met 3 mooi vormgegeven kaarten. In het gecompileerde style.css bestand zie je dat de gemeenschappelijke eigenschappen van de kaarten netjes gegroepeerd zijn onder één komma-gescheiden selector (.card-standard, .card-featured, .card-product).

Extend & Overerving (@extend & %-placeholders)

1. Wat is Overerving met @extend?