Articles
Inleiding tot SASS/SCSS
Foutafhandeling in SASS

Foutafhandeling in SASS

Dit artikel legt de foutafhandeling in SASS uit.

We leggen uit hoe je robuuste stijlontwerpen bouwt met behulp van de fout-, waarschuwing- en debug-functies van SASS.

YouTube Video

Foutafhandeling in SASS

Wat is 'foutafhandeling' in SASS?

SASS is geen taal die runtime-uitzonderingen afhandelt, maar biedt wel een mechanisme om ongeldige toestanden tijdens het compileren te detecteren en de ontwikkelaar hierover duidelijk te informeren. Dit helpt voorkomen dat onjuiste waarden of ontwerp­fouten als CSS worden uitgevoerd zonder dat iemand het merkt.

In SASS gaat foutafhandeling niet alleen over 'stoppen wanneer er iets misgaat', maar dient het ook als een manier om ontwerp­aannames direct in de code uit te drukken. Hier zijn hoofdzakelijk vier methoden voor beschikbaar.

Stopt onmiddellijk de compilatie wanneer een toestand wordt gedetecteerd die volgens het ontwerp niet is toegestaan.

Waarschuwt bij problemen, maar de compilatie gaat wel verder.

Geeft variabelen en berekenings­resultaten weer om de waarden­stroom en interne toestand te controleren.

  • Guards/Voorwaarden (@if) Controleert inputwaarden en voorwaarden vooraf om problemen te voorkomen voordat ze optreden.

@error: Stopt fatale fouten betrouwbaar

Gebruik @error voor toestanden die absoluut onacceptabel zijn in je ontwerp. Als een onjuiste waarde wordt doorgegeven, wordt de compilatie onmiddellijk gestopt.

1@mixin set-width($width) {
2  @if type-of($width) != number {
3    @error "Width must be a number.";
4  }
5
6  width: $width;
7}
  • Deze mixin stopt het buildproces als er iets anders dan een getal wordt doorgegeven. Dit is erg effectief als een 'laatste veiligheidsvangnet' om onbedoeld gebruik te voorkomen.

Praktisch gebruik van @error, inclusief eenheidscontrole

Zelfs als het een getal is, kan het gebruik van de verkeerde eenheid problematisch zijn. In SASS kun je unit() gebruiken om eenheden te valideren.

1@mixin set-padding($value) {
2  @if unit($value) != "px" {
3    @error "Padding must be specified in px.";
4  }
5
6  padding: $value;
7}
  • Op deze manier wordt het per ongeluk doorgeven van bijvoorbeeld 1rem of % direct opgemerkt. Het is belangrijk dat je ontwerprichtlijnen als code kunt afdwingen.

@warn: Voor verouderingsmeldingen en waarschuwingen

Met @warn kun je ongewenste toestanden melden die niet meteen alles laten falen. Omdat de CSS toch wordt gegenereerd, is dit geschikt voor een geleidelijke migratie.

1@mixin legacy-color($color) {
2  @warn "legacy-color is deprecated. Use theme-color instead.";
3
4  color: $color;
5}
  • Deze mixin geeft een waarschuwing, maar breekt bestaande code niet. Dit is vooral effectief bij refactoring van grote projecten.

Patroon voor het geven van conditionele waarschuwingen

Het wordt praktischer in combinatie met controle op waarde­bereiken.

1@mixin set-opacity($value) {
2  @if $value < 0 or $value > 1 {
3    @warn "Opacity should be between 0 and 1.";
4  }
5
6  opacity: $value;
7}
  • Je kunt ontwerpfouten melden zonder het ontwikkelproces te stoppen. Het sterke punt van @warn is dat je de 'mate van strengheid' kunt bepalen.

@debug: Visualiseer de waardenstroom

@debug is meer een observatie­hulpmiddel voor het opsporen van problemen dan een middel voor foutafhandeling. Je kunt berekenings­resultaten en de inhoud van variabelen controleren.

1$base-size: 8px;
2$spacing: $base-size * 3;
3
4@debug $spacing;
  • Omdat waarden tijdens het compileren worden weergegeven, helpt dit bij het controleren van complexe berekeningen. Laat dit niet in productiesystemen staan; gebruik het alleen voor onderzoeksdoeleinden.

Guard-design met @if is het belangrijkst

In de praktijk is het vooraf valideren van inputs via ontwerp het belangrijkst—nog vóór het gebruik van @error of @warn.

1@mixin grid-columns($count) {
2  @if type-of($count) != number or $count <= 0 {
3    @error "Column count must be a positive number.";
4  }
5
6  grid-template-columns: repeat($count, 1fr);
7}
  • Door zulke 'juiste voorwaarden' expliciet te benoemen worden je mixins en functies zelfverklarend.

Foutafhandeling in functies (@function)

Je kunt fouten op dezelfde manier binnen functies afhandelen. Dit is met name belangrijk in berekeningslogica.

1@function divide($a, $b) {
2  @if $b == 0 {
3    @error "Division by zero is not allowed.";
4  }
5
6  @return $a / $b;
7}
  • Omdat je foute logica kunt detecteren voordat de CSS wordt gegenereerd, verhoogt dit de veiligheid van je design­systeem.

Richtlijnen voor praktisch gebruik

Tot slot vatten we de criteria voor het kiezen hiertussen samen, met speciale aandacht voor de vaak moeilijke afwegingen in de praktijk.

  • Als er sprake is van een duidelijke ontwerp­schending of bug Gebruik @error. Omdat het genereren van CSS in een foutieve toestand direct tot bugs leidt, wordt de compilatie onmiddellijk gestopt.

  • Wanneer je wilt waarschuwen voor veroudering of enkel een waarschuwing wilt geven Gebruik @warn. Je kunt blijven werken zonder bestaande code of code in migratie te breken, terwijl je wel waarschuwt voor toekomstige problemen.

  • Als je de waardenstroom of berekenings­resultaten wilt controleren Gebruik @debug. Dit is effectief als tijdelijk hulpmiddel om logica te controleren of oorzaken te onderzoeken.

  • Wanneer je alle voorwaarden, zoals inputwaarden of gebruiks­condities, wilt valideren Gebruik guards met @if. Door aannames expliciet te maken, kun je problemen voorkomen voordat ze optreden.

Omdat SASS een taal is waarin je 'bijna alles kunt schrijven', leidt een ontwerp dat ongewenste toestanden duidelijk in de code definieert tot beter onderhoudbare en minder foutgevoelige stijlen op de lange termijn.

Samenvatting

Foutafhandeling in SASS is een mechanisme om aannames en regels voor stijlontwerp duidelijk uit te drukken en voortdurend in de code af te dwingen.

  • Fouten bestaan zodat ongeldige toestanden niet onopgemerkt blijven en meteen betrouwbaar gestopt kunnen worden.
  • Waarschuwingen helpen om toekomstige wijzigingen of migraties veilig uit te voeren zonder direct dingen stuk te maken.
  • Guards zijn bedoeld om zo te ontwerpen dat problemen überhaupt niet ontstaan, in plaats van ze achteraf op te lossen.

Door deze goed te begrijpen en toe te passen, wordt SASS niet alleen een uitbreiding van CSS maar een zeer betrouwbare ontwerptaal die intenties en beperkingen kan uitdrukken.

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

YouTube Video

SASS en BEM