Sass Functies & Kleurmanipulatie

Als webdesigner of front-end developer ben je voortdurend bezig met kleurharmonieën, hover-effecten en maatvoeringen. Telkens als je een knop een iets donkerdere tint wilt geven voor een hover-status, of de breedte van een kolom wilt berekenen, kun je je fotobewerkingsprogramma of rekenmachine erbij pakken. Maar dat kost tijd.

Gelukkig heeft Sass/SCSS ingebouwde functies en rekenkundige mogelijkheden. Hiermee laat je Sass het reken- en kleurwerk automatisch uitvoeren direct in je stylesheet! In deze les leer je hoe je kleuren dynamisch aanpast met lighten(), darken(), en hoe je rekenkundige bewerkingen gebruikt voor flexibele layouts.

1. Kleurmanipulatie met `lighten()` en `darken()`

In plaats van voor elke knop-status (:hover, :active, :focus) een nieuwe HEX-kleurcode te zoeken, kun je Sass vragen om een bestaande kleur een bepaald percentage lichter of donkerder te maken.

A. Kleuren lichter maken met `lighten()`

De functie lighten() neemt een basiskleur en maakt deze met een gekozen percentage lichter.

// Syntaxis: lighten($kleur, $percentage)
$primary-color: #2563eb; // Een mooie helderblauwe kleur

.card {
    background-color: lighten($primary-color, 35%); // Maakt een zachte pastelblauwe tint
    border: 1px solid $primary-color;
}

B. Kleuren donkerder maken met `darken()`

De functie darken() werkt precies hetzelfde, maar maakt de kleur donkerder. Dit is ideaal voor :hover- en :active-statussen van knoppen.

$btn-bg: #10b981; // Groen

.btn {
    background-color: $btn-bg;
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    transition: background-color 0.2s ease;

    &:hover {
        background-color: darken($btn-bg, 8%); // Iets donkerder groen bij hover
    }

    &:active {
        background-color: darken($btn-bg, 15%); // Nog donkerder groen bij klikken
    }
}

Tip: Houd veranderingen subtiel! Voor hover-effecten op knoppen is een aanpassing van 5% tot 12% meestal al meer dan genoeg voor een stijlvol effect.

2. Andere Handige Kleurfuncties

Naast lichter en donkerder maken, heeft Sass nog meer krachtige kleurfuncties in huis:

A. Transparantie toevoegen met `rgba()`

In standaard CSS moet je bij rgba() alle drie de RGB-waarden intypen (rgba(37, 99, 235, 0.5)). Sass maakt dit véél slimmer: je kunt een hexadecimale variabele combineren met een α-waarde (transparantie):

$brand-color: #ef4444;

.overlay {
    // Sass zet de hex automatisch om en voegt 50% transparantie toe!
    background-color: rgba($brand-color, 0.5); 
}

B. Kleuren mengen met `mix()`

Met mix() kun je twee kleuren met elkaar mengen op basis van een gekozen gewicht.

$color-main: #3b82f6; // Blauw
$color-accent: #f59e0b; // Oranje

.hybrid-box {
    // Mengt 70% blauw met 30% oranje
    background-color: mix($color-main, $color-accent, 70%); 
}

3. Rekenkundige Bewerkingen in Sass (Math)

Sass is niet alleen een stylingstaal, het is ook een reken wonder! Je kunt optellen (+), aftrekken (-), vermenigvuldigen (*), en delen (/) rechtstreeks in je code gebruiken.

A. Werken met een basismaat (Design Token)

Door één basismaat af te spreken (bijvoorbeeld voor spacing/padding), kun je de rest van je pagina hier rekenkundig van afleiden.

$base-spacing: 16px;

.container {
    padding: $base-spacing; // 16px
}

.hero {
    // Vermenigvuldigen
    padding-top: $base-spacing * 4; // 64px
    margin-bottom: $base-spacing * 2; // 32px
}

.small-card {
    // Delen of Aftrekken
    padding: $base-spacing / 2; // 8px
    border-radius: $base-spacing - 10px; // 6px
}

B. Welke eenheden mag je combineren?

Sass snapt hoe eenheden werken:

10px + 15px = 25px (werkt perfect)
2rem 1.5 = 3rem (werkt perfect)*
100% / 3 = 33.3333% (werkt perfect)
10px + 2rem = FOUTMELDING! (Sass weet niet hoeveel pixels in jouw browser gelijkstaan aan 1rem).

Belangrijk: Vermenigvuldig niet twee eenheden met elkaar (bijv. 10px 10px). Dit leidt tot 100pxpx (vierkante pixels) en dat herkent CSS niet! Vermenigvuldig een eenheid altijd met een los getal (10px * 10).

4. Praktijkvoorbeeld: Een Dynamische Thema-kaart

Laten we kleurmanipulatie en rekenkundige bewerkingen combineren tot één slimme SCSS-component:

// 1. Instellingen & Variabelen
$theme-color: #8b5cf6; // Paars
$base-unit: 12px;

// 2. Component styling
.card {
    // Spacing berekend op basis van de $base-unit
    padding: $base-unit * 2; // 24px
    margin-bottom: $base-unit * 1.5; // 18px
    
    // Kleuren afgeleid van het paarse thema
    background-color: lighten($theme-color, 32%); // Zeer zacht paars
    border: 2px solid $theme-color;
    border-radius: $base-unit; // 12px
    box-shadow: 0 4px 12px rgba($theme-color, 0.25); // Zachte paarse schaduw

    &__title {
        color: darken($theme-color, 20%); // Dieppaars voor leesbaarheid
        font-size: 1.5rem;
        margin-bottom: $base-unit; // 12px
    }

    &__button {
        display: inline-block;
        padding: ($base-unit / 1.5) ($base-unit * 1.5); // 8px 18px
        background-color: $theme-color;
        color: #ffffff;
        border-radius: $base-unit / 2; // 6px
        border: none;
        cursor: pointer;

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

5. Oefening: Bouw een Dynamische UI-Kit

In deze opdracht ga je de kracht van Sass-functies en rekenkunde toepassen door een klein kleurensysteem en twee componenten te bouwen die volledig meeschalen op basis van twee hoofdvariabelen.

Stappenplan

Maak een projectmap aan met een index.html en een style.scss bestand.
Definieer bovenaan je style.scss twee basisvariabelen:

$brand-color: een kleur naar keuze (bijv. een tint blauw, groen of oranje).
$spacing-unit: een basisgrootte in pixels (bijv. 16px).

3. Maak in HTML een Hero-banner en een Notificatie-badge:

De Hero-banner heeft een achtergrond, een titel, een tekst en een primair actieknopje.
De Notificatie-badge telt een waarschuwing of status.

4. Schrijf de SCSS-code voor deze elementen volgens onderstaande regels:

Gebruik geen losse kleuren (behalve eventueel zwart of wit) in je CSS-regels, maar leid alle kleuren af van $brand-color met behulp van lighten(), darken(), en rgba().
Gebruik geen willekeurige pixelwaardes voor paddings en margins, maar bereken ze met rekenkundige bewerkingen (*, /, +) op basis van $spacing-unit.
Zorg voor een :hover- en :active-status op de knop met behulp van darken().

5. Compileer style.scss naar style.css en koppel deze aan index.html.

Test de kracht van Sass: Pas $brand-color aan naar een totaal andere kleur (bijv. van blauw naar rood) en verander $spacing-unit van 16px naar 20px. Zie hoe je gehele UI automatisch en in perfecte proportie mee verandert!

Verwachte Output

Een strakke HTML-pagina met een Hero-banner en een Notificatie-badge. Wanneer je de twee hoofdvariabelen bovenaan je SCSS-bestand aanpast, kleurt en schaalt de volledige pagina automatisch mee zonder dat de verhoudingen of contrasten breken.