SASS-modules

Dit artikel legt SASS-modules uit.

We leggen uit hoe je SASS kunt modulariseren met @use en @forward, en hoe je variabelen, mixins, functies, themainstellingen en publieke API's kunt hergebruiken.

YouTube Video

SASS-modules

Het modulaire systeem van SASS helpt om stijlen duidelijk te begrenzen en biedt een ontwerp dat gemakkelijk te hergebruiken en te onderhouden is.

Basisconcepten van modules

SASS-modules lossen problemen op van vervuiling van de globale naamruimte en onduidelijke afhankelijkheden die voorkwamen bij de oude @import. Elk bestand wordt geladen als een module met een eigen namespace, en alleen de expliciet geëxporteerde items zijn toegankelijk vanuit andere bestanden.

Voorbeeld bestandsstructuur

Hier is eerst een voorbeeld van een realistische projectstructuur. Hieronder staat een voorbeeld van een klein designsysteem.

 1styles/
 2├─ _variables.scss
 3├─ _mixins.scss
 4├─ _functions.scss
 5├─ components/
 6│  ├─ _button.scss
 7│  └─ _card.scss
 8├─ utilities/
 9│  └─ _helpers.scss
10└─ main.scss

• Deze structuur maakt modularisatie eenvoudig, evenals het testen en vervangen van onderdelen.
• Partial-bestanden hebben een underscore aan het begin van de bestandsnaam.

Basisprincipes van @use

@use laadt een module en levert een namespace. Dit voorkomt naamconflicten en verduidelijkt de bronmodule.

1// _variables.scss
2$primary-color: #0a74da;
3$padding-base: 12px;

• Dit bestand is eenvoudig en definieert alleen variabelen. Variabelen die uit een module worden geëxporteerd, kunnen direct worden geraadpleegd met @use.

1// main.scss
2@use 'variables';
3
4.example {
5  color: variables.$primary-color;
6  padding: variables.$padding-base;
7}

• Hier wordt de variables-module gebruikt met de variables. namespace. Deze aanpak maakt de oorsprong van elk item duidelijk.

Namespaces inkorten of aliassen maken

Met as kun je de namespace inkorten.

1@use 'variables' as vars;
2
3.btn {
4  color: vars.$primary-color;
5}

• Dit is een voorbeeld waarbij variables wordt geïmporteerd met de kortere alias vars. Kies namen afhankelijk van of je leesbaarheid of typegemak vooropstelt.

Mixin-definitie

Mixins en functies kunnen ook binnen modules worden gedefinieerd en gebruikt. Opmerkingen consistent houden met de conventies van het project bevordert de duidelijkheid.

1// _mixins.scss
2// Create a simple responsive container mixin
3@mixin container($max-width: 1200px) {
4  width: 100%;
5  margin-left: auto;
6  margin-right: auto;
7  max-width: $max-width;
8}

• Dit bestand definieert een mixin voor containers. Hij accepteert argumenten en biedt standaardwaarden.

1// main.scss
2@use 'mixins' as m;
3
4.wrapper {
5  @include m.container(1000px);
6}

• Dit is een voorbeeld van een mixin gebruiken met @include.

Functies definiëren

Functies worden gebruikt om waarden te retourneren en kunnen binnen modules worden gedefinieerd en hergebruikt. Door berekeningen voor ontwerpwaarden in functies te kapselen, worden stijlen stabieler en makkelijker te onderhouden.

1// _functions.scss
2@use 'sass:math';
3
4// Create a simple px-to-rem converter function
5@function to-rem($px, $base: 16) {
6  @return math.div($px, $base) * 1rem;
7}

• Dit bestand definieert een functie die pixelwaarden naar rem omzet. Er wordt ook een standaardbasiswaarde gespecificeerd.

1// main.scss
2@use 'functions' as f;
3
4.title {
5  font-size: f.to-rem(24);
6}

• Hier is een voorbeeld van het aanroepen van een functie via @use en het toepassen van het resultaat op een stijl.

Module exporteren en @forward (API-ontwerp)

Wanneer u meerdere interne bestanden extern wilt blootstellen, kunt u @forward gebruiken om een 'publieke API' te maken.

1// _index.scss (module entry)
2@forward 'variables';
3@forward 'mixins';
4@forward 'functions';

• Meerdere interne bestanden kunnen worden gegroepeerd als één entry point, dat fungeert als publieke API. Hierdoor kunnen gebruikers alle benodigde functies gebruiken door slechts één entry point te importeren.

1// main.scss
2@use 'index' as ds; // ds = design system
3
4.button {
5  color: ds.$primary-color;
6  @include ds.container();
7}

• De inhoud van variables en mixins wordt gezamenlijk toegankelijk via de index. @forward maakt van index de publieke laag.

De API beheren met de opties show / hide van @forward

Als u alleen specifieke variabelen wilt blootstellen, gebruik dan de optie show of hide.

1// _variables.scss
2$internal-thing: 10px !default; // for internal use
3$primary-color: #0a74da !default;
4$secondary-color: #f5f5f5 !default;

• Door !default toe te voegen, kunt u een waarde publiceren die kan worden overschreven.

1// _index.scss
2@forward 'variables' show $primary-color, $secondary-color;
3@forward 'mixins';

• Met show bij @forward kunt u de publieke API beperken tot alleen de noodzakelijke elementen. Variabelen en functies die intern worden gebruikt, zijn niet zichtbaar van buitenaf.

Modules configureerbaar maken (met with)

Als u !default gebruikt in de module, kunnen de waarden worden overschreven via with aan de import-kant.

1// _theme.scss
2$brand-color: #ff6600 !default;
3$radius: 4px !default;
4
5@mixin button-style() {
6  background-color: $brand-color;
7  border-radius: $radius;
8}

• Een module met standaardwaarden gedefinieerd met !default kan geconfigureerd worden via with.

1// main.scss
2@use 'theme' with (
3  $brand-color: #2288ff,
4  $radius: 8px
5);
6
7.my-btn {
8  @include theme.button-style();
9}

• with bij @use maakt het mogelijk om standaardvariabelen bij het importeren te overschrijven. Dit is handig voor het wisselen van thema’s.
• Let op: with werkt alleen bij het importeren, u kunt deze waarden achteraf niet meer veranderen.

Praktisch voorbeeld: Knopcomponent (Compleet Voorbeeld)

Laten we proberen knopstijlen te ontwerpen met behulp van modules. Schei eerst variabelen en mixins in aparte modules.

1// _variables.scss
2$btn-padding-y: 8px !default;
3$btn-padding-x: 16px !default;
4$btn-font-size: 14px !default;
5$btn-primary-bg: #0a74da !default;
6$btn-primary-color: #fff !default;

• Standaardvariabelen voor knoppen worden hier gedefinieerd. Met !default kunnen gebruikers deze waarden overschrijven.

 1// _mixins.scss
 2@use "variables" as v;
 3
 4@mixin btn-base() {
 5  display: inline-flex;
 6  align-items: center;
 7  justify-content: center;
 8  padding: v.$btn-padding-y v.$btn-padding-x;
 9  font-size: v.$btn-font-size;
10  border: none;
11  cursor: pointer;
12}

• De basismixin voor knoppen wordt hier gedefinieerd. Ze zijn gescheiden voor eenvoudig hergebruik.

 1// _button.scss
 2@use 'variables' as v;
 3@use 'mixins' as m;
 4
 5.button {
 6  @include m.btn-base();
 7  background: v.$btn-primary-bg;
 8  color: v.$btn-primary-color;
 9  border-radius: 4px;
10  transition: opacity 0.15s ease;
11  &:hover { opacity: 0.9; }
12}
13
14.button--large {
15  padding: calc(v.$btn-padding-y * 1.5) calc(v.$btn-padding-x * 1.5);
16  font-size: v.$btn-font-size * 1.25;
17}

• Knopstijlen worden aangemaakt met namespace-referenties via @use. Een variant wordt gedefinieerd als .button--large.

1// main.scss
2@use 'button'; // or @use 'index' that forwards button, variables, mixins

• Door de button-module te importeren, kun je de knopstijlen direct gebruiken.

Thema’s wisselen (met meerdere themabestanden)

Thema’s wisselen kan door configuratie via with of door aparte modules te maken en te wisselen met welke via @use wordt geïmporteerd.

1// themes/_light.scss
2$brand-color: #0a74da !default;

1// themes/_dark.scss
2$brand-color: #111827 !default;

• Definieer merk-kleuren en andere instellingen in meerdere themabestanden en wissel deze tijdens de build of import.

1// main.scss (light theme)
2@use 'theme' with ($brand-color: #0a74da);
3@use 'button';

• Kies het thema door óf with te gebruiken óf door bijvoorbeeld @use 'themes/light' te importeren tijdens het buildproces.

Privé en publiek (Prefix _ en !default)

In SASS geeft een underscore aan het begin van een bestandsnaam aan dat het om een partial gaat. Maar voor het beheren van exportzichtbaarheid van modules, gebruik show en hide met @forward om te bepalen wat wordt geëxporteerd.

Gebruik @forward om de publieke API te organiseren en interne implementaties te verbergen.

Best practices voor gebruik in de praktijk

Hieronder staan enkele basisconcepten die handig zijn bij het praktisch gebruik van SASS. Al deze richtlijnen helpen verwarring tijdens de ontwikkeling te verminderen en uw code georganiseerd te houden.

• Als variabelen waarschijnlijk veranderen voor een thema, voeg dan !default toe. Dit maakt het voor gebruikers makkelijker om waarden te overschrijven.
• Modules moeten worden gescheiden op basis van verantwoordelijkheid en gericht zijn op één doel. Het wordt gemakkelijker te beheren door variabelen, mixins en componenten te scheiden.
• Beheer publieke inhoud met @forward en gebruik show of hide indien nodig. Het bepalen van de reikwijdte van publieke inhoud leidt tot veiliger ontwerp.
• Gebruik namespaces om duidelijk te maken bij welke module elke functie hoort. Dit voorkomt verwarring met andere code.
• Onthoud dat with alleen werkt op het moment van @use. Omdat je ze later niet meer kunt wijzigen, stel de configuraties in bij het importeren.
• Gebruik een underscore aan het begin van bestandsnamen om er partials van te maken, zodat ze niet afzonderlijk worden gecompileerd. Dit maakt het eenvoudiger om bestanden te combineren tot een grotere structuur.
• Gebruiksvoorbeelden opnemen in de index-module helpt bij testen en documentatie. Hierdoor wordt het voor gebruikers eenvoudiger om het gedrag te begrijpen.

Door deze punten in gedachten te houden, kun je grote projecten beheren en leesbare code behouden als team.

Samenvatting

Het SASS-modulesysteem organiseert stijlcode via namespaces, publieke API’s en vereenvoudigde configuratie. Door slim gebruik te maken van @use en @forward wordt teamontwikkeling, thema-wisselingen en bibliotheekontwerp veel eenvoudiger.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video