⏱️ Leestijd: ca. 6 min.

Partials, Mappenstructuur & de 7-to-1 Architectuur

Wanneer je aan een professionele website of webapplicatie werkt, groeit je CSS-bestand al snel uit tot duizenden regels code. Een enkel onoverzichtelijk bestand maakt het beheer, het opsporen van fouten en de samenwerking met collega's ontzettend moeilijk.

In professionele front-end development lossen we dit op door onze SCSS-code op te splitsen in partials en deze te structureren volgens de 7-to-1 architectuur. In deze les leer je hoe je deze structuur opzet en hoe je modules slim inlaadt en doorgeeft met @use en @forward.

1. Wat is een SCSS Partial?

Een partial is een klein SCSS-bestand dat een specifiek onderdeel van je styling bevat (bijvoorbeeld alleen de variabelen, de navigatiebalk of de knoppen).

Je herkent een partial altijd aan de underscore (_) aan het begin van de bestandsnaam:

Belangrijk: De underscore vertelt de Sass-compiler dat het bestand niet als een los .css-bestand gecompileerd moet worden. De compiler negeert _buttons.scss als zelfstandig bestand, maar verwerkt de inhoud pas wanneer het wordt geladen in je hoofd-stylesheet (main.scss).

2. De 7-to-1 Architectuur Uitgelegd

Om te voorkomen dat ontwikkelaars hun partials op een willekeurige manier in mappen gooien, is de 7-to-1 architectuur bedacht. Dit is een wereldwijde standaard in de front-end sector.

Het Principe

Je verdeelt al je SCSS-partials over 7 specifieke mappen. Uiteindelijk voeg je alle bestanden vanuit die mappen samen in 1 centraal hoofdbestand (main.scss).

scss/
│
├── abstracts/          # 1. Hulpbestanden (variabelen, mixins, functies)
├── base/               # 2. Globale basisinstellingen & resets
├── components/         # 3. Kleine, hergebruikbare UI-elementen
├── layout/             # 4. Grote structuur-onderdelen van de pagina
├── pages/              # 5. Pagina-specifieke stijlen
├── themes/             # 6. Kleurenschema's en specifieke modi
└── vendors/            # 7. Externe CSS-bibliotheken
│
└── main.scss           # Het hoofdbestand dat alles verzamelt

De 7 Mappen in detail

  1. abstracts/
Bevat alle helpers van je project: variabelen, mixins en functies. Cruciaal detail: De bestanden in deze map genereren op zichzelf geen enkele regel CSS-output. Ze bevatten enkel de logica en instellingen die andere bestanden nodig hebben.
  1. base/
Bevat het fundament van je vormgeving. Denk aan globale CSS-resets, typografie-instellingen en standaard styling voor kale HTML-tags (zoals body, a, h1).
  1. components/
Bevat kleine, op zichzelf staande en herbruikbare UI-onderdelen (vaak opgebouwd volgens de BEM-methode).
  1. layout/
Bevat stijlen voor de grote structurele onderdelen die het skelet van je pagina vormen.
  1. pages/
Bevat stijlen die uitsluitend van toepassing zijn op één specifieke pagina.
  1. themes/
Wordt gebruikt voor grotere toepassingen waar gebruikers kunnen wisselen van thema.
  1. vendors/
Bevat kant-en-klare CSS of SCSS van externe partijen die je in je project importeert.

3. Modules inladen: @use vs. @forward

Het inladen van bestanden in modern SCSS kan in het begin verwarrend zijn. Laten we het verschil tussen @use en @forward helder uitwerken.

A. @use: Importeren voor LOKAAL gebruik

Wanneer je in een component (bijvoorbeeld _buttons.scss) variabelen uit de map abstracts nodig hebt, gebruik je @use.

Standaard maakt @use een namespace (naamruimte) aan met de naam van het bestand:

// scss/components/_buttons.scss
@use '../abstracts/variables';

.btn {
    // Je MOET 'variables.' voor de naam zetten
    background-color: variables.$color-primary; 
}

Gebruik van as *

Vind je het vervelend om steeds variables. voor elke variabele te typen? Dan kun je as * toevoegen. Hiermee importeer je de variabelen direct in de globale scope van dat specifieke bestand:

// scss/components/_buttons.scss
@use '../abstracts/variables' as *;

.btn {
    // Geen voorvoegsel meer nodig!
    background-color: $color-primary; 
}
Tip: as * maakt je code korter en sneller leesbaar, maar gebruik het bewust zodat je wel weet uit welk bestand je variabelen afkomstig zijn.

B. @forward: Doorgeven via abstracts/_index.scss

Nu ontstaat er een praktisch probleem: je map abstracts/ bevat vaak meerdere bestanden (_variables.scss, _mixins.scss, _functions.scss). Moet je die nu telkens allemaal los importeren met @use boven elk component?

Nee! En daar komt @forward in beeld.

Waarom gebruiken we @forward uitsluitend in abstracts/_index.scss?

De map abstracts/ is de enige map waarvan de inhoud (variabelen en mixins) hergebruikt moet worden binnen andere SCSS-bestanden.

In plaats van 3 losse @use regels boven elk component te typen, maken we alleen in de map abstracts/ een centraal verdeelbestand aan: _index.scss.

// scss/abstracts/_index.scss

// @forward zegt: "Ik gebruik deze variabelen/mixins zelf niet,
// maar ik geef ze DOOR aan wie dit _index.scss bestand inlaadt."
@forward 'variables';
@forward 'mixins';
@forward 'functions';

Het resultaat in je componenten

Omdat Sass automatisch zoekt naar een _index.scss wanneer je naar een map verwijst, hoef je in je componenten (_card.scss, _buttons.scss, etc.) nu nog maar één enkele regel te schrijven:

// scss/components/_buttons.scss

// Laadt in één keer ALLE variabelen, mixins en functies uit abstracts in!
@use '../abstracts' as *;

.btn {
    background-color: $color-primary; // Afkomstig uit _variables.scss
    @include flex-center;             // Afkomstig uit _mixins.scss
}
Let op: In de overige mappen (components/, layout/, base/, etc.) maken we géén _index.scss of @forward aan. Die mappen bevatten namelijk gewone CSS-selectors die direct door de browser getoond moeten worden en hoeven niet te worden doorgegeven aan andere SCSS-bestanden.

4. Het Hoofdbestand: main.scss

Het bestand main.scss staat in de wortel van je scss/-map. Dit is het enige bestand dat door de Sass-compiler wordt omgezet naar een echt .css-bestand.

In main.scss gebruik je uitsluitend @use om al je partials op de juiste volgorde in te laden:

// scss/main.scss

// 1. Abstracts (optioneel, indien nodig in main)
@use 'abstracts' as *;

// 2. Base
@use 'base/reset';
@use 'base/typography';

// 3. Layout
@use 'layout/header';
@use 'layout/footer';

// 4. Components
@use 'components/buttons';
@use 'components/card';

5. Oefening: Het Opzetten van een 7-to-1 Architectuur

In deze uitgebreide praktijkopdracht ga je stap voor stap een volledige 7-to-1 mappenstructuur opbouwen en correct koppelen.

Stappenplan

Stap 1: Mappenstructuur aanmaken

Maak een projectmap genaamd project-7to1 aan met een map css/ en een map scss/. Maak binnen scss/ de volgende mappen aan:

Stap 2: abstracts/ opzetten met @forward

  1. Maak scss/abstracts/_variables.scss aan en definieer:
   $color-primary: #2563eb;
   $color-dark: #1e293b;
   $font-main: 'Arial', sans-serif;
  1. Maak scss/abstracts/_mixins.scss aan en definieer:
   @mixin flex-center {
       display: flex;
       justify-content: center;
       align-items: center;
   }
  1. Maak scss/abstracts/_index.scss aan en stuur de helpers door met @forward:
   @forward 'variables';
   @forward 'mixins';

Stap 3: base/ en components/ opzetten met @use

  1. Maak scss/base/_reset.scss aan met basismeta-regels (box-sizing, margin: 0).
  2. Maak scss/components/_buttons.scss aan.

Stap 4: main.scss samenstellen en compileren

  1. Maak scss/main.scss aan en laad daarin alle partials op de juiste volgorde in via @use.
  2. Compileer scss/main.scss naar css/style.css.
  3. Maak een index.html aan, koppel css/style.css en voeg een testknop toe om het resultaat te controleren.

Verwachte Output

Een perfect georganiseerd project waarin alle partials netjes zijn gescheiden. Het gecompileerde css/style.css bevat de samengevoegde CSS-code zonder dat er foutmeldingen optreden over onbekende variabelen of mixins.