De `if`-functie in SASS

Dit artikel legt de if-functie in SASS uit.

We lopen stap voor stap alles door, van de basis van de if-functie tot geavanceerde technieken.

YouTube Video

De if-functie in SASS

De functie if() is een eenvoudige voorwaardelijke functie van SASS die op basis van een booleaanse conditie een van twee waarden retourneert. Deze lijkt op de ternary-operator van JavaScript.

Syntax

De syntaxis is als volgt:.

1// if(condition, trueValue, falseValue)

• Als condition waar is, retourneert het trueValue; als het onwaar is, retourneert het falseValue.

Basisgebruik

Je kunt de functie if() bijvoorbeeld gebruiken om achtergrond- en tekstkleuren te wijzigen afhankelijk van of het thema donker of licht is.

Voorbeeldcode

1$theme: "dark";
2
3$background-color: if($theme == "dark", black, white);
4$text-color: if($theme == "dark", white, black);
5
6body {
7  background-color: $background-color;
8  color: $text-color;
9}

• Als de variabele $theme "dark" is, wordt de achtergrond zwart met witte tekst; als deze "light" is, wordt de achtergrond wit met zwarte tekst.

De gegenereerde CSS

1body {
2  background-color: black;
3  color: white;
4}

• Omdat de variabele $theme "dark" is, is de achtergrond zwart met witte tekst.

Verschillen tussen de @if-statement en de if()-functie

Sass biedt een @if-statement en een if()-functie voor conditionele vertakkingen, maar ze worden voor verschillende doeleinden gebruikt.

Voorbeeldcode

 1$theme: "dark";
 2
 3// `@if` statement: Compile-time branching (syntax level)
 4$background-color: null;
 5@if $theme == "dark" {
 6  $background-color: black;
 7} @else if $theme == "light" {
 8  $background-color: white;
 9} @else {
10  $background-color: gray;
11}
12
13// `if()` function: Returns a value (expression level)
14$text-color: if($theme == "dark", white, black);
15
16body {
17  background-color: $background-color;
18  color: $text-color;
19}

• De @if-statement bepaalt welke code wordt gegenereerd tijdens de Sass-compilatie.
• Daarentegen retourneert de if()-functie een waarde en wordt ze gebruikt om binnen expressies dynamisch tussen waarden te schakelen.

De gegenereerde CSS

1body {
2  background-color: black;
3  color: white;
4}

• In dit voorbeeld, omdat $theme "dark" is, worden een zwarte achtergrond en een witte tekstkleur toegepast.
• De twee belangrijkste verschillen zijn dat de @if-statement de structuur aanstuurt en dat de if()-functie een waarde retourneert.

Gebruik van geneste if-functies

Wanneer je complexe vertakkingen nodig hebt, kun je if-functies nesten.

Voorbeeldcode

 1$theme: "custom";
 2$custom-color: blue;
 3
 4$background-color: if(
 5  $theme == "dark",
 6  black,
 7  if(
 8    $theme == "light",
 9    white,
10    $custom-color
11  )
12);
13
14body {
15  background-color: $background-color;
16}

• Als $theme "dark" is, retourneert het zwart; als het "light" is, retourneert het wit; anders retourneert het de standaardwaarde ($custom-color).

De gegenereerde CSS

1body {
2  background-color: blue;
3}

• Aangezien de variabele $theme custom is, is de achtergrondkleur blauw.

Praktische toepassingen

Thema wisselen

Hieronder staat een voorbeeld dat knopstijlen wijzigt op basis van het thema.

1$theme: "dark";
2
3.button {
4  background-color: if($theme == "dark", #333, #fff);
5  color: if($theme == "dark", #fff, #333);
6  border: 1px solid if($theme == "dark", #444, #ccc);
7}

• Deze code is een SASS-voorbeeld van conditionele logica dat de achtergrond-, tekst- en randkleuren van een knop wisselt op basis van de waarde van de variabele $theme. De functie if() wordt gebruikt om dynamisch stijlen in te stellen voor donkere en lichte thema's.

De gegenereerde CSS

1.button {
2  background-color: #333;
3  color: #fff;
4  border: 1px solid #444;
5}

• Door het thema te wisselen kun je het algehele ontwerp uniform wijzigen.

Gevorderd voorbeeld: kleurcontrast dynamisch instellen

Laten we een voorbeeld bekijken dat automatisch de tekstkleur instelt op basis van de achtergrondkleur.

Voorbeeldcode

 1@use "sass:color";
 2
 3$background-color: #000;
 4
 5$text-color: if(
 6  color.channel($background-color, "lightness", $space: hsl) > 50%,
 7  black,
 8  white
 9);
10
11body {
12  background-color: $background-color;
13  color: $text-color;
14}

• De functie color.channel() wordt gebruikt om de lichtheid (lightness) van de achtergrondkleur op te halen. Als die waarde groter is dan 50%, wordt zwart gekozen; is deze kleiner, dan wordt wit als tekstkleur gekozen, waarmee het contrast met de achtergrond automatisch wordt geoptimaliseerd.

De gegenereerde CSS

1body {
2  background-color: #000;
3  color: white;
4}

• Door de if()-functie te gebruiken, kun je flexibele stijlen implementeren die rekening houden met toegankelijkheid, zoals het aanpassen van het contrast.

Combineren met @function

Het gebruik van de if-functie binnen een @function maakt nog flexibeler stijlontwerp mogelijk.

Voorbeeldcode

 1@function theme-color($theme, $type) {
 2  @return if(
 3    $theme == "dark",
 4    if(
 5      $type == "background",
 6      black,
 7      white
 8    ),
 9    if(
10      $type == "background",
11      white,
12      black
13    )
14  );
15}
16
17body {
18  background-color: theme-color("dark", "background");
19  color: theme-color("dark", "text");
20}

• Deze code demonstreert het gebruik van if() binnen een @function om geschikte kleuren te retourneren op basis van het thema en het type kleur. Dit maakt een consistent en herbruikbaar stijlontwerp per thema mogelijk.

De gegenereerde CSS

1body {
2  background-color: black;
3  color: white;
4}

• Door helperfuncties te maken en te gebruiken die de if()-functie benutten, kun je de onderhoudbaarheid van het hele project verbeteren.

Notities

1. De if-functie kan niet met dynamische waarden worden gebruikt Omdat CSS zelf een statische taal is, worden met de if-functie de waarden bepaald op het moment dat SASS wordt gecompileerd. Voor voorwaardelijke logica tijdens runtime moet je JavaScript gebruiken.

2. Geef prioriteit aan leesbaarheid Omdat geneste if-functies complex kunnen worden en de leesbaarheid kunnen schaden, kun je waar nodig SASS @mixin en @function gebruiken om je code te structureren.

Conclusie

De if-functie van SASS is een krachtig hulpmiddel dat verschillende waarden retourneert afhankelijk van de voorwaarden. De functie is niet alleen nuttig voor eenvoudige condities, maar ook in veel scenario's, zoals themawissel en dynamische stijlinstellingen. Bij complexe voorwaarden moet je letten op de leesbaarheid en @mixin en @function inzetten om de onderhoudbaarheid te verbeteren.

Door de if-functie onder de knie te krijgen, kun je een efficiënter en flexibeler stijlontwerp bereiken.

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

YouTube Video