Articles
Introduksjon til SASS/SCSS
if-funksjonen i SASS

if-funksjonen i SASS

Denne artikkelen forklarer if-funksjonen i SASS.

Vi går gjennom alt fra det grunnleggende ved if-funksjonen til avanserte teknikker, trinn for trinn.

YouTube Video

if-funksjonen i SASS

if()-funksjonen er en enkel betingelsesfunksjon i SASS som returnerer en av to verdier basert på en boolsk betingelse. Den ligner på JavaScripts ternære operator.

Syntaks

Syntaksen er som følger:.

1// if(condition, trueValue, falseValue)
  • Hvis condition er sann, returnerer den trueValue; hvis falsk, returnerer den falseValue.

Grunnleggende bruk

For eksempel kan du bruke if()-funksjonen til å endre bakgrunns- og tekstfarger avhengig av 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 $theme-variabelen er "dark", blir bakgrunnen svart med hvit tekst; hvis den er "light", blir bakgrunnen hvit med svart tekst.

Den genererte CSS-en 

1body {
2  background-color: black;
3  color: white;
4}
  • Siden $theme-variabelen er "dark", er bakgrunnen svart med hvit tekst.

Forskjeller mellom @if-setningen og if()-funksjonen

Sass tilbyr en @if-setning og en if()-funksjon for betinget forgrening, men de brukes til ulike 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-setningen kontrollerer hvilken kode som genereres ved Sass-kompilering.
  • I motsetning til dette returnerer if()-funksjonen en verdi og brukes til å bytte verdier dynamisk i uttrykk.

Den genererte CSS-en 

1body {
2  background-color: black;
3  color: white;
4}
  • I dette eksemplet, siden $theme er "dark", brukes en svart bakgrunn og hvit tekstfarge.
  • De to viktigste forskjellene er at @if-setningen styrer strukturen, og at if()-funksjonen returnerer en verdi.

Bruke nestede if-funksjoner

Når du trenger kompleks forgrening, kan du legge if-funksjoner inni hverandre.

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", returnerer den svart; hvis "light", returnerer den hvit; ellers returnerer den standardverdien ($custom-color).

Den genererte CSS-en 

1body {
2  background-color: blue;
3}
  • Siden $theme-variabelen er custom, er bakgrunnsfargen blå.

Praktiske bruksområder

Temabytting

Nedenfor er et eksempel som endrer knappestiler basert 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 koden er et SASS-eksempel på betinget logikk som bytter bakgrunns-, tekst- og kantfarger for en knapp basert på verdien av $theme-variabelen. if()-funksjonen brukes til å sette stiler dynamisk for mørke og lyse temaer.

Den genererte CSS-en 

1.button {
2  background-color: #333;
3  color: #fff;
4  border: 1px solid #444;
5}
  • Ved å bytte tema kan du endre det overordnede designet på en enhetlig måte.

Avansert eksempel: Dynamisk innstilling av fargekontrast

La oss se på et eksempel som automatisk setter tekstfargen basert på bakgrunnsfargen.

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}
  • Funksjonen color.channel() brukes til å hente bakgrunnsfargens lyshet (lightness). Hvis den verdien er større enn 50%, velges svart; hvis den er mindre, velges hvitt som tekstfarge, noe som automatisk optimaliserer kontrasten mot bakgrunnen.

Den genererte CSS-en 

1body {
2  background-color: #000;
3  color: white;
4}
  • Ved å bruke if()-funksjonen kan du implementere fleksible stiler som tar hensyn til tilgjengelighet i designet, for eksempel ved å justere kontrast.

Kombinere med @function

Å bruke if-funksjonen inne i en @function gir enda mer fleksibel stilutforming.

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 koden demonstrerer bruk av if() inne i en @function for å returnere passende farger basert på tema og fargetype. Dette muliggjør konsistent og gjenbrukbar stilutforming for hvert tema.

Den genererte CSS-en 

1body {
2  background-color: black;
3  color: white;
4}
  • Ved å lage og bruke hjelpefunksjoner som utnytter if()-funksjonen, kan du forbedre vedlikeholdbarheten til hele prosjektet.

Notater

  1. if-funksjonen kan ikke brukes med dynamiske verdier Fordi CSS i seg selv er et statisk språk, bestemmer if-funksjonen verdier når SASS kompileres. For betinget logikk under kjøretid må du bruke JavaScript.

  2. Prioriter lesbarhet Fordi nøstede if-funksjoner kan bli komplekse og svekke lesbarheten, kan du bruke SASS @mixin og @function etter behov for å organisere koden.

Konklusjon

SASS' if-funksjon er et kraftig verktøy som returnerer ulike verdier avhengig av betingelser. Den er nyttig ikke bare for enkle betingelser, men også i mange scenarier som temabytting og dynamiske stilinnstillinger. Når du håndterer komplekse betingelser, bør du likevel være oppmerksom på lesbarhet og bruke @mixin og @function for å forbedre vedlikeholdbarheten.

Ved å mestre if-funksjonen kan du oppnå mer effektiv og fleksibel stilutforming.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

Betingelser i SASS