Funktionen `if` i SASS

Den här artikeln förklarar funktionen if i SASS.

Vi går igenom allt från grunderna i funktionen if till avancerade tekniker, steg för steg.

YouTube Video

Funktionen if i SASS

Funktionen if() är en enkel villkorsfunktion i SASS som returnerar ett av två värden baserat på ett booleskt villkor. Den liknar JavaScripts ternära operator.

Syntax

Syntaxen är följande:.

1// if(condition, trueValue, falseValue)

• Om condition är sann returnerar den trueValue; om falsk returnerar den falseValue.

Grundläggande användning

Till exempel kan du använda funktionen if() för att ändra bakgrunds- och textfärger beroende på om temat är mörkt eller ljust.

Exempelkod

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}

• Om variabeln $theme är "dark" blir bakgrunden svart med vit text; om den är "light" blir bakgrunden vit med svart text.

Den genererade CSS-koden

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

• Eftersom variabeln $theme är "dark" är bakgrunden svart med vit text.

Skillnader mellan @if-satsen och funktionen if()

Sass tillhandahåller en @if-sats och en if()-funktion för villkorlig förgrening, men de används för olika ändamål.

Exempelkod

 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-satsen styr vilken kod som genereras vid Sass-kompilering.
• Däremot returnerar if()-funktionen ett värde och används för att dynamiskt växla mellan värden i uttryck.

Den genererade CSS-koden

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

• I det här exemplet, eftersom $theme är "dark", tillämpas en svart bakgrund och vit textfärg.
• De två största skillnaderna är att @if-satsen styr strukturen och att if()-funktionen returnerar ett värde.

Använda nästlade if-funktioner

När du behöver komplexa förgreningar kan du nästla if-funktioner.

Exempelkod

 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}

• Om $theme är "dark" returnerar den svart; om "light" returnerar den vit; annars returnerar den standardvärdet ($custom-color).

Den genererade CSS-koden

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

• Eftersom variabeln $theme är custom är bakgrundsfärgen blå.

Praktiska användningsfall

Temaväxling

Nedan finns ett exempel som ändrar knappstilar baserat på temat.

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}

• Den här koden är ett SASS-exempel på villkor som växlar en knapps bakgrunds-, text- och kantfärger baserat på värdet på variabeln $theme. Funktionen if() används för att dynamiskt ange stilar för mörka och ljusa teman.

Den genererade CSS-koden

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

• Genom att byta tema kan du enhetligt ändra den övergripande designen.

Avancerat exempel: Dynamisk inställning av färgkontrast

Låt oss titta på ett exempel som automatiskt sätter textfärgen baserat på bakgrundsfärgen.

Exempelkod

 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}

• Funktionen color.channel() används för att hämta bakgrundsfärgens ljushet (lightness). Om det värdet är större än 50% väljs svart; om det är mindre väljs vitt som textfärg, vilket automatiskt optimerar kontrasten mot bakgrunden.

Den genererade CSS-koden

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

• Genom att använda if()-funktionen kan du implementera flexibla stilar som tar hänsyn till tillgänglighet, till exempel genom att justera kontrasten.

Kombinera med @function

Att använda funktionen if inuti en @function möjliggör ännu mer flexibel stildesign.

Exempelkod

 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}

• Den här koden visar hur man använder if() inom en @function för att returnera lämpliga färger baserat på tema och färgtyp. Detta möjliggör konsekvent och återanvändbar stildesign för varje tema.

Den genererade CSS-koden

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

• Genom att skapa och använda hjälpfunktioner som utnyttjar if()-funktionen kan du förbättra hela projektets underhållbarhet.

Anteckningar

1. Funktionen if kan inte användas med dynamiska värden Eftersom CSS i sig är ett statiskt språk avgör funktionen if värdena när SASS kompileras. För villkorslogik vid körning behöver du använda JavaScript.

2. Prioritera läsbarhet Eftersom nästlade if-funktioner kan bli komplexa och försämra läsbarheten kan du använda SASS @mixin och @function vid behov för att organisera din kod.

Slutsats

SASS-funktionen if är ett kraftfullt verktyg som returnerar olika värden beroende på villkor. Den är användbar inte bara för enkla villkor, utan också i många scenarier som temaväxling och dynamiska stilinställningar. Men vid hantering av komplexa villkor bör du tänka på läsbarhet och utnyttja @mixin och @function för att förbättra underhållbarheten.

Genom att behärska funktionen if kan du uppnå mer effektiv och flexibel stildesign.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video