SASS' `if`-funktion

Denne artikel forklarer SASS' if-funktion.

Vi gennemgår alt fra det grundlæggende om if-funktionen til avancerede teknikker, trin for trin.

YouTube Video

SASS' if-funktion

Funktionen if() er en simpel betingelsesfunktion i SASS, der returnerer en af to værdier baseret på en boolesk betingelse. Den ligner JavaScripts ternære operator.

Syntaks

Syntaksen er som følger:.

1// if(condition, trueValue, falseValue)

• Hvis condition er sand, returneres trueValue; hvis falsk, returneres falseValue.

Grundlæggende Brug

For eksempel kan du bruge if()-funktionen til at ændre baggrunds- og tekstfarver afhængigt af, om temaet er mørkt eller lyst.

Eksempelkode

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}

• Hvis variablen $theme er "dark", bliver baggrunden sort med hvid tekst; hvis den er "light", bliver baggrunden hvid med sort tekst.

Den genererede CSS

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

• Da variablen $theme er "dark", er baggrunden sort med hvid tekst.

Forskelle mellem @if-sætningen og if()-funktionen

Sass tilbyder en @if-sætning og en if()-funktion til betinget forgrening, men de bruges til forskellige formål.

Eksempelkode

 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}

• @if-sætningen styrer, hvilken kode der genereres under kompileringen af Sass.
• Derimod returnerer if()-funktionen en værdi og bruges til dynamisk at skifte værdier i udtryk.

Den genererede CSS

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

• I dette eksempel, da $theme er "dark", anvendes en sort baggrund og hvid tekstfarve.
• De to væsentlige forskelle er, at @if-sætningen styrer strukturen, og at if()-funktionen returnerer en værdi.

Brug af indlejrede if-funktioner

Når du har brug for kompleks forgrening, kan du indlejre if-funktioner.

Eksempelkode

 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}

• Hvis $theme er "dark", returneres sort; hvis "light", returneres hvid; ellers returneres standardværdien ($custom-color).

Den genererede CSS

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

• Da variablen $theme er custom, er baggrundsfarven blå.

Praktiske anvendelser

Temaskift

Herunder er et eksempel, der ændrer knapstile baseret på temaet.

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}

• Denne kode er et eksempel på betinget SASS, som skifter en knaps baggrunds-, tekst- og kantfarver baseret på værdien af variablen $theme. Funktionen if() bruges til dynamisk at sætte stilarter for mørke og lyse temaer.

Den genererede CSS

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

• Ved at skifte tema kan du ensartet ændre det overordnede design.

Avanceret eksempel: Dynamisk indstilling af farvekontrast

Lad os se på et eksempel, der automatisk sætter tekstfarven baseret på baggrundsfarven.

Eksempelkode

 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}

• color.channel()-funktionen bruges til at hente baggrundsfarvens lyshed (lightness). Hvis den værdi er større end 50%, vælges sort; hvis den er mindre, vælges hvid som tekstfarve, hvilket automatisk optimerer kontrasten til baggrunden.

Den genererede CSS

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

• Ved at bruge if()-funktionen kan du implementere fleksible stilarter, der tager højde for tilgængelighed i designet, f.eks. ved at justere kontrasten.

Kombination med @function

At bruge if-funktionen inde i en @function giver endnu mere fleksibelt stildesign.

Eksempelkode

 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}

• Denne kode demonstrerer brug af if() i en @function til at returnere passende farver baseret på tema og farvetype. Dette muliggør konsistent og genbrugeligt stildesign for hvert tema.

Den genererede CSS

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

• Ved at oprette og bruge hjælpefunktioner, der udnytter if()-funktionen, kan du forbedre vedligeholdeligheden af hele projektet.

Noter

1. if-funktionen kan ikke bruges med dynamiske værdier Da CSS i sig selv er et statisk sprog, fastlægger if-funktionen værdierne på det tidspunkt, hvor SASS kompileres. Til betinget logik ved kørselstid skal du bruge JavaScript.

2. Prioritér læsbarhed Fordi indlejrede if-funktioner kan blive komplekse og forringe læsbarheden, kan du efter behov bruge SASS @mixin og @function til at organisere din kode.

Konklusion

SASS' if-funktion er et stærkt værktøj, der returnerer forskellige værdier afhængigt af betingelserne. Den er nyttig ikke kun til simple betingelser, men også i mange scenarier såsom temaskift og dynamiske stilindstillinger. Når du håndterer komplekse betingelser, skal du dog være opmærksom på læsbarheden og udnytte @mixin og @function for at forbedre vedligeholdeligheden.

Ved at mestre if-funktionen kan du opnå mere effektivt og fleksibelt stildesign.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video