Betingelser i SASS

Denne artikkelen forklarer betingelser i SASS.

Vi forklarer tydelig alt fra grunnleggende til avansert bruk av betingelser med direktivene @if, @else if og @else, med praktiske eksempler.

YouTube Video

Betingelser i SASS

SASS er et stilarkspråk som utvider CSS, og du kan styre stiler fleksibelt ved hjelp av betingelser. I SASS kan du bruke @if, @else if og @else til å veksle hvilke stiler som genereres ved kompilering.

Grunnleggende syntaks for betingelser

Grunnleggende 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 betingelsen, og hvis den er usann, evalueres @else if- eller @else-blokkene i rekkefølge.

Enkelt betingelseseksempel

I følgende eksempel skifter bakgrunnsfargen basert på variabelen $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}

Kompilert CSS

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

• Når $theme er "dark", brukes en mørk bakgrunn og hvit tekstfarge.

Kombinere betingelser med beregninger

Betingelser håndterer ikke bare streng- og fargesammenligninger, 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}

Kompilert CSS

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

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

Nøstede betingelser

Ved å nøste betingelser kan du uttrykke 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}

Kompilert CSS

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

• Nøsting av betingelser gjør det mulig å style basert på både tema og størrelse.

Bruke betingelser i egendefinerte funksjoner

Å bruke betingelser i egendefinerte funksjoner kan forbedre gjenbrukbarheten.

 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}

Kompilert CSS

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

• Ved å kapsle inn betingelser i funksjoner kan du øke gjenbrukbarheten og vedlikeholdbarheten.

Praktisk eksempel – bytte design

La oss se på et eksempel på å bytte det overordnede designet basert på bestemte 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}

Kompilert 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 bytte fargeoppsettet for hele siden basert på tema-variabelen.

Merknader og beste praksis

Når du bruker betingelser i SASS, kan du vurdere følgende punkter.

1. Hold betingelser enkle

   Komplisert nøsting går ut over lesbarheten, så det å bruke funksjoner og miksiner bidrar til å holde det enkelt.

2. Abstraher med variabler og funksjoner

   Hvis du bruker lignende betingelser flere steder, vil det å samle dem i variabler eller funksjoner forbedre vedlikeholdbarheten.

3. Unngå oppblåst logikk

   Foren designreglene så mye som mulig og unngå overdreven bruk av betingelser.

Konklusjon

Betingelser i SASS er et svært effektivt verktøy for å lage fleksible, dynamiske stiler. Her forklarte vi alt trinn for trinn fra det grunnleggende til praktiske eksempler. Når du bruker betingelser i virkelige prosjekter, bør du utforme med gjenbrukbar kode i tankene, samtidig som du passer på å ikke gjøre ting unødvendig komplisert.

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