Betingelser i SASS

Denne artikel forklarer betingelser i SASS.

Vi forklarer tydeligt alt fra det grundlæggende til avanceret brug af betingelser med direktiverne @if, @else if og @else, med praktiske eksempler.

YouTube Video

Betingelser i SASS

SASS er et stylesheet-sprog, der udvider CSS, og du kan styre stilarter fleksibelt ved hjælp af betingelser. I SASS kan du bruge @if, @else if og @else til at skifte outputtet af stilarter under kompilering.

Grundlæggende syntaks for betingelser

Grundlæggende betingelser i SASS skrives med følgende syntaks.

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 evaluerer den første betingelse, og hvis den er falsk, evalueres @else if- eller @else-blokkene i rækkefølge.

Simpelt betingelseseksempel

I det følgende eksempel skifter baggrundsfarven baseret på variablen $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}

Kompileret CSS

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

• Når $theme er "dark", anvendes en mørk baggrund og hvid tekstfarve.

Kombination af betingelser med beregninger

Betingelser håndterer ikke kun streng- og farvesammenligninger, men også numeriske beregninger.

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

Kompileret CSS

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

• Numeriske sammenligninger er også mulige, og når $width overstiger 1000px, genereres max-width: 1200px.

Indlejrede betingelser

Ved at indlejre betingelser kan du udtrykke komplekse betingelser.

 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}

Kompileret CSS

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

• Indlejring af betingelser muliggør styling baseret på både tema og størrelse.

Brug af betingelser i brugerdefinerede funktioner

At bruge betingelser i brugerdefinerede funktioner kan forbedre genanvendeligheden.

 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}

Kompileret CSS

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

• Ved at indkapsle betingelser i funktioner kan du øge genanvendeligheden og vedligeholdelsesevnen.

Et praktisk eksempel - Skifte mellem designs

Lad os se på et eksempel på at skifte det overordnede design baseret på visse betingelser.

 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}

Kompileret 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}

• Du kan dynamisk skifte hele sidens farveskema i forhold til tema-variablen.

Bemærkninger og bedste praksis

Når du bruger SASS-betingelser, kan du overveje følgende punkter.

1. Hold betingelserne enkle

   Kompleks indlejring skader læsbarheden, så det hjælper at bruge funktioner og mixins for at holde det enkelt.

2. Abstraher med variabler og funktioner

   Hvis du bruger lignende betingelser flere steder, forbedres vedligeholdelsesevnen ved at samle dem i variabler eller funktioner.

3. Undgå oppustet logik

   Foren designregler så meget som muligt, og undgå overdreven brug af betingelser.

Konklusion

Betingelser i SASS er et meget effektivt værktøj til at skabe fleksible, dynamiske stilarter. Her forklarede vi alt trin for trin fra det grundlæggende til praktiske eksempler. Når du bruger betingelser i rigtige projekter, bør du designe med genanvendelig kode for øje og samtidig passe på ikke at overkomplicere tingene.

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