Voorwaardelijke logica in SASS

Dit artikel legt voorwaardelijke logica in SASS uit.

We leggen alles helder uit, van de basis tot geavanceerd gebruik van conditionals met de directives @if, @else if en @else, met praktische voorbeelden.

YouTube Video

Voorwaardelijke logica in SASS

SASS is een stylesheettaal die CSS uitbreidt; met conditionals kun je stijlen flexibel aansturen. In SASS kun je met @if, @else if en @else de uitvoer van stijlen bij het compileren sturen.

Basissyntaxis voor conditionals

Eenvoudige conditionals in SASS schrijf je met de volgende syntaxis.

1@if condition {
2  // Code executed when the condition is true
3} @else if condition {
4  // Code executed when another condition is true
5} @else {
6  // Code executed when all conditions are false
7}

• @if evalueert de eerste voorwaarde; als die onwaar is, worden de blokken @else if en @else vervolgens in volgorde geëvalueerd.

Eenvoudig voorbeeld van een conditional

In het volgende voorbeeld wisselt de achtergrondkleur op basis van de variabele $theme.

 1$theme: "dark";
 2
 3body {
 4  @if $theme == "dark" {
 5    background-color: #333;
 6    color: #fff;
 7  } @else if $theme == "light" {
 8    background-color: #fff;
 9    color: #000;
10  } @else {
11    background-color: #f0f0f0;
12    color: #333;
13  }
14}

Gecompileerde CSS

1body {
2  background-color: #333;
3  color: #fff;
4}

• Wanneer $theme "dark" is, worden een donkere achtergrond en een witte tekstkleur toegepast.

Conditionals combineren met berekeningen

Conditionals behandelen niet alleen string- en kleurvergelijkingen, maar ook numerieke berekeningen.

1$width: 1200px;
2
3.container {
4  @if $width > 1000px {
5    max-width: 1200px;
6  } @else {
7    max-width: 800px;
8  }
9}

Gecompileerde CSS

1.container {
2  max-width: 1200px;
3}

• Numerieke vergelijkingen zijn ook mogelijk, en wanneer $width groter is dan 1000px, wordt max-width: 1200px gegenereerd.

Geneste conditionals

Door conditionals te nesten kun je complexe voorwaarden uitdrukken.

 1$theme: "dark";
 2$size: "large";
 3
 4button {
 5  @if $theme == "dark" {
 6    background-color: #000;
 7    color: #fff;
 8
 9    @if $size == "large" {
10      padding: 20px;
11    } @else {
12      padding: 10px;
13    }
14  } @else {
15    background-color: #fff;
16    color: #000;
17
18    @if $size == "large" {
19      padding: 15px;
20    } @else {
21      padding: 8px;
22    }
23  }
24}

Gecompileerde CSS

1button {
2  background-color: #000;
3  color: #fff;
4  padding: 20px;
5}

• Geneste conditionals maken styling op basis van zowel thema als grootte mogelijk.

Conditionals gebruiken in aangepaste functies

Conditionals binnen aangepaste functies gebruiken kan de herbruikbaarheid verbeteren.

 1@function adjust-color($theme) {
 2  @if $theme == "dark" {
 3    @return #333;
 4  } @else if $theme == "light" {
 5    @return #fff;
 6  } @else {
 7    @return #ccc;
 8  }
 9}
10
11.card {
12  background-color: adjust-color("dark");
13}

Gecompileerde CSS

1.card {
2  background-color: #333;
3}

• Door conditionals in functies in te kapselen verhoog je de herbruikbaarheid en onderhoudbaarheid.

Een praktisch voorbeeld - Vormgeving wisselen

Laten we een voorbeeld bekijken waarin de algehele vormgeving op basis van bepaalde voorwaarden wordt gewisseld.

 1$theme: "light";
 2
 3body {
 4  font-family: Arial, sans-serif;
 5
 6  @if $theme == "dark" {
 7    background-color: #121212;
 8    color: #e0e0e0;
 9  } @else if $theme == "light" {
10    background-color: #f9f9f9;
11    color: #333;
12  } @else {
13    background-color: #fff;
14    color: #000;
15  }
16}
17
18header {
19  @if $theme == "dark" {
20    border-bottom: 1px solid #333;
21  } @else {
22    border-bottom: 1px solid #ccc;
23  }
24}

Gecompileerde CSS

1body {
2  font-family: Arial, sans-serif;
3  background-color: #f9f9f9;
4  color: #333;
5}
6
7header {
8  border-bottom: 1px solid #ccc;
9}

• Je kunt het kleurenschema van de volledige pagina dynamisch wisselen op basis van de themavariabele.

Opmerkingen en best practices

Wanneer je voorwaardelijke constructies in SASS gebruikt, kun je met de volgende punten rekening houden.

1. Houd conditionals eenvoudig

   Complexe nesting schaadt de leesbaarheid; het benutten van functies en mixins helpt het eenvoudig te houden.

2. Abstraheer met variabelen en functies

   Als je vergelijkbare voorwaarden op meerdere plaatsen gebruikt, verbetert het samenbrengen ervan in variabelen of functies de onderhoudbaarheid.

3. Voorkom opgeblazen logica

   Uniformeer ontwerprichtlijnen zoveel mogelijk en vermijd overmatig gebruik van conditionals.

Conclusie

Conditionals in SASS zijn een zeer effectief hulpmiddel voor het maken van flexibele, dynamische stijlen. Hier hebben we alles stap voor stap uitgelegd, van de basis tot praktische voorbeelden. Wanneer je conditionals in echte projecten gebruikt, ontwerp dan met herbruikbare code in gedachten en let erop dat je de zaken niet onnodig ingewikkeld maakt.

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

YouTube Video