⏱️ Leestijd: ca. 4 min.

Introductie tot Sass/SCSS & Compilatie

Naarmate webprojecten groter en complexer worden, kan het beheren van standaard CSS bestanden een flinke uitdaging worden. Je eindigt al snel met duizenden regels code, herhalende kleurencodes en ingewikkelde selectors.

Gelukkig is er een slimmere manier om je stijlen te schrijven: Sass (Syntactically Awesome Style Sheets). In deze les leer je wat een CSS-preprocessor is, het verschil tussen CSS en SCSS, en hoe het compilatieproces (build-proces) werkt.

1. Wat is Sass / SCSS?

Sass is een CSS-preprocessor. Dit is een programma dat je helpt om stijlen te schrijven met extra functionaliteiten die standaard CSS (nog) niet ondersteunt, zoals variabelen, nesten, mixins en functies.

Belangrijk: Een webbrowser (zoals Chrome, Firefox of Safari) kan geen .scss-bestanden lezen. Je code moet eerst worden omgezet (gecompileerd) naar een gewoon .css-bestand.

2. SCSS-syntaxis vs. Standaard CSS

Sass kent twee syntaxes: de originele indented Sass-syntaxis en de modernere SCSS-syntaxis (Sassy CSS). In dit vak gebruiken we uitsluitend SCSS.

Het grote voordeel van SCSS is dat het 100% compatibel is met standaard CSS. Elke geldige CSS-code is ook geldige SCSS-code!

Standaard CSS

In CSS schrijf je lange selectors en herhaal je vaak bovenliggende HTML-elementen:

/* Standaard CSS */
.navigatie {
    background-color: #2c3e50;
    padding: 15px;
}

.navigatie ul {
    list-style: none;
    margin: 0;
}

.navigatie ul li {
    display: inline-block;
}

.navigatie ul li a {
    color: #ffffff;
    text-decoration: none;
}

SCSS (met Nesting & Variabelen)

In SCSS kun je elementen nesten (in elkaar opsluiten) net zoals de structuur van je HTML-document. Ook kun je herbruikbare variabelen aanmaken met een $-teken:

/* SCSS Syntaxis */
$hoofdkleur: #2c3e50;
$tekstkleur: #ffffff;

.navigatie {
    background-color: $hoofdkleur;
    padding: 15px;

    ul {
        list-style: none;
        margin: 0;

        li {
            display: inline-block;

            a {
                color: $tekstkleur;
                text-decoration: none;
            }
        }
    }
}
Tip: Nesting maakt je code overzichtelijker, maar overdrijf niet! Ga liever niet dieper dan 3 of 4 niveaus om te voorkomen dat de gecompileerde CSS onnodig specifiek wordt.

3. Het Build-proces (Compilatie)

Omdat de browser alleen .css begrijpt, moet er een build-proces plaatsvinden. Dit proces vertaalt jouw geschreven SCSS-code naar schone, geoptimaliseerde CSS.

  [ Jouw SCSS bestand ]  --->  ( Sass Compiler )  --->  [ Resultaat CSS bestand ]
     style.scss                   (Build-stap)             style.css

Hoe compileer je SCSS?

Er zijn verschillende manieren om SCSS te compileren naar CSS:

  1. VS Code Extensions (bijv. Live Sass Compiler): Ideaal voor beginners. Zodra je jouw .scss-bestand opslaat, genereert de extensie automatisch het .css-bestand.
  2. Command Line (CLI): Via Node.js en een npm-script in de terminal:
   npx sass style.scss style.css --watch

De --watch vlag zorgt ervoor dat de compiler blijft luisteren naar wijzigingen in het bestand.

  1. Build Tools (Vite, Webpack, Gulp): Geavanceerde tools die in professionele front-end workflows gebruikt worden om meerdere bestanden te bundelen en te minificeren.

4. Source Maps: Waarom heb je ze nodig?

Wanneer je SCSS compileert, genereert de compiler vaak ook een extra bestand: style.css.map. Dit noemen we een Source Map.

Als je in de browser (DevTools / Inspecteer element) een stijl bekijkt, laat de browser normaal zien in welk .css-bestand en op welke regel de stijl staat. Een Source Map zorgt ervoor dat de browser begrijpt dat de stijl eigenlijk uit jouw originele .scss-bestand komt!

Tip: Laat .map-bestanden altijd gewoon in dezelfde map staan als je gecompileerde CSS-bestanden. Dit maakt het debuggen in de browser veel eenvoudiger.

5. Opdracht: Je eerste SCSS Compilatie

Tijd om zelf aan de slag te gaan! Je gaat een eenvoudig project opzetten waarin je SCSS naar CSS compileert.

Stappenplan

  1. Maak een nieuwe projectmap aan genaamd scss-intro.
  2. Maak hierin een bestand index.html en een map scss met daarin het bestand style.scss.
  3. Installeer de extensie Live Sass Compiler in VS Code (of gebruik de CLI via je terminal).
  4. Voeg de volgende SCSS-code toe aan style.scss:
$achtergrond-kaart: #f4f6f8;
$rand-kleur: #3498db;

.card {
    background-color: $achtergrond-kaart;
    border-left: 5px solid $rand-kleur;
    padding: 20px;
    border-radius: 8px;

    h2 {
        color: #2c3e50;
        margin-top: 0;
    }

    p {
        color: #7f8c8d;
        line-height: 1.5;
    }
}
  1. Klik onderaan in VS Code op "Watch Sass" (of start de watcher via de terminal).
  2. Controleer of er automatisch een map/bestand style.css is aangemaakt.
  3. Koppel de gegenereerde style.css in je index.html en bekijk het resultaat in de browser.

Verwachte Output

In je map moet nu automatisch een style.css aanwezig zijn waarin de nested regels zijn omgezet naar standaard CSS selectors (.card h2, .card p).

Evaluatiecriteria