Over Sass - dus over de stijl

Style (Sass)

Hoe zit de Sass-architectuur in elkaar? We willen graag strak en clean houden met het Sass 7-1 patroon:

Het principe is simpel: 7 mappen voor de deeltjes (partials), en 1 hoofdbestand (main.scss) dat alles in de juiste volgorde samenbindt. Elk bestand heeft één duidelijke verantwoordelijkheid.

De 7 Mappen (Van Abstract naar Concreet)

1. abstracts/ – De blauwdrukken (genereert zelf geen CSS). Bevat _variables.scss (kleuren, breakpoints) en _mixins.scss (media queries, grids).
2. base/ – De fundamenten. Bevat _base.scss voor de globale HTML-resets (box-sizing), standaard typografie (body, h1, p) en margins.
3. layout/ – Het skelet. Bevat de macro-blokken van de site: _header.scss, _main.scss (page wrapper), en _footer.scss.
4. components/ – De bouwstenen. Herbruikbare, geïsoleerde UI-elementen zoals _button.scss, _card.scss en _navbar.scss. Regel: Nest maximaal 3 niveaus diep en gebruik zo min mogelijk classes.
5. pages/ – Pagina-specifiek. Gereserveerd voor unieke pagina’s. De unieke styling voor de /menu pagina staat bijvoorbeeld in components/_menu.scss (of hier als _menu.scss).
6. themes/ – Thema’s. Gereserveerd voor bijvoorbeeld een toekomstige dark mode.
7. vendors/ – Derden. Gereserveerd voor externe CSS/Sass (bijv. normalize).

De 1: main.scss (De Verkeersleider)

Dit bestand staat in de root van de sass map, bevat zelf geen styling, maar regelt de exacte volgorde van de @import keten. Hierdoor druppelen variabelen en mixins automatisch door naar de onderliggende componenten:

/* ==========================================================================
   Main Stylesheet - Sass 7-1 Pattern
   ========================================================================== */

// 1. Abstracts (Moeten ALTIJD eerst)
@import "abstracts/variables";
@import "abstracts/mixins";

// 2. Base
@import "base/base";

// 3. Layout
@import "layout/header";
@import "layout/main";
@import "layout/footer";

// 4. Components
@import "components/hero";
@import "components/button";
@import "components/navbar";
@import "components/card";

// Dev tools
@import "debug";

Waarom we dit doen:

• Leest als een boek: Geen spreadsheets van 3000 regels; je weet exact in welke map je moet zoeken.
• Robuust & Responsive: Responsive logica en metrics (zoals $breakpoint-medium) centraal geregeld via mixins. Dit houdt de componenten clean en onderhoudbaar voor iedereen.