Villkorssatser i SASS

Den här artikeln förklarar villkorssatser i SASS.

Vi förklarar tydligt allt från grunderna till avancerad användning av villkor med direktiven @if, @else if och @else, med praktiska exempel.

YouTube Video

Villkorssatser i SASS

SASS är ett stilmallsspråk som utökar CSS, och med villkor kan du styra stilar flexibelt. I SASS kan du använda @if, @else if och @else för att växla vilken CSS som genereras vid kompilering.

Grundläggande villkorssyntax

Grundläggande villkor i SASS skrivs med följande syntax.

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 utvärderar det första villkoret och om det är falskt utvärderas @else if- eller @else-blocken i ordning.

Enkelt villkorsexempel

I följande exempel växlar bakgrundsfärgen beroende på variabeln $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}

Kompilerad CSS

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

• När $theme är "dark" tillämpas en mörk bakgrund och vit textfärg.

Kombinera villkor med beräkningar

Villkor hanterar inte bara sträng- och färgjämförelser, utan även numeriska beräkningar.

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

Kompilerad CSS

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

• Numeriska jämförelser är också möjliga, och när $width överstiger 1000px genereras max-width: 1200px.

Nästlade villkor

Genom att nästla villkor kan du uttrycka komplexa villkor.

 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}

Kompilerad CSS

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

• Genom att nästla villkor kan du styla baserat på både tema och storlek.

Använda villkor i egna funktioner

Att använda villkor i egna funktioner kan förbättra återanvändbarheten.

 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}

Kompilerad CSS

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

• Genom att kapsla in villkor i funktioner kan du öka återanvändbarheten och underhållbarheten.

Ett praktiskt exempel – Växla design

Låt oss titta på ett exempel där den övergripande designen växlas baserat på vissa villkor.

 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}

Kompilerad 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 dynamiskt växla hela sidans färgschema utifrån temavariabeln.

Anmärkningar och bästa praxis

När du använder villkorssatser i SASS kan du överväga följande punkter.

1. Håll villkoren enkla

   Komplex nästling försämrar läsbarheten, så att utnyttja funktioner och mixins hjälper till att hålla det enkelt.

2. Abstrahera med variabler och funktioner

   Om du använder liknande villkor på flera ställen förbättrar det underhållbarheten att samla dem i variabler eller funktioner.

3. Undvik uppsvälld logik

   Standardisera designreglerna så långt som möjligt och undvik att överanvända villkor.

Slutsats

Villkor i SASS är ett mycket effektivt verktyg för att skapa flexibla, dynamiska stilar. Här förklarade vi allt steg för steg, från grunderna till praktiska exempel. När du använder villkor i verkliga projekt, designa med återanvändbar kod i åtanke och var noga med att inte komplicera i onödan.

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