Instrukcje warunkowe w SASS

Ten artykuł wyjaśnia instrukcje warunkowe w SASS.

Jasno wyjaśniamy wszystko od podstaw po zaawansowane zastosowania instrukcji warunkowych z użyciem dyrektyw @if, @else if i @else, wraz z praktycznymi przykładami.

YouTube Video

Instrukcje warunkowe w SASS

SASS to język arkuszy stylów rozszerzający CSS i możesz elastycznie sterować stylami, używając instrukcji warunkowych. W SASS można używać @if, @else if i @else, aby przełączać wynikowe style w czasie kompilacji.

Podstawowa składnia instrukcji warunkowych

Podstawowe instrukcje warunkowe w SASS zapisuje się następująco.

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 sprawdza pierwszy warunek, a jeśli jest on fałszywy, w kolejności są oceniane bloki @else if oraz @else.

Prosty przykład instrukcji warunkowej

W poniższym przykładzie kolor tła przełącza się na podstawie zmiennej $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}

Skompilowany CSS

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

• Gdy $theme ma wartość "dark", stosowane są ciemne tło i biały kolor tekstu.

Łączenie warunków z obliczeniami

Instrukcje warunkowe obsługują nie tylko porównania łańcuchów i kolorów, ale także obliczenia liczbowe.

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

Skompilowany CSS

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

• Możliwe są też porównania liczbowe, a gdy $width przekracza 1000px, generowane jest max-width: 1200px.

Zagnieżdżone instrukcje warunkowe

Dzięki zagnieżdżaniu instrukcji warunkowych można wyrażać złożone warunki.

 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}

Skompilowany CSS

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

• Zagnieżdżanie warunków umożliwia stylowanie w oparciu zarówno o motyw, jak i o rozmiar.

Używanie warunków w funkcjach niestandardowych

Używanie warunków wewnątrz funkcji niestandardowych może zwiększyć reużywalność.

 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}

Skompilowany CSS

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

• Zamykając warunki w funkcjach, możesz zwiększyć reużywalność i łatwość utrzymania.

Przykład praktyczny - przełączanie wyglądu

Przyjrzyjmy się przykładowi przełączania ogólnego wyglądu na podstawie określonych warunków.

 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}

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

• Możesz dynamicznie przełączać schemat kolorów całej strony zgodnie ze zmienną motywu.

Uwagi i dobre praktyki

Podczas korzystania z instrukcji warunkowych SASS możesz wziąć pod uwagę następujące punkty.

1. Utrzymuj warunki proste

   Złożone zagnieżdżanie pogarsza czytelność, dlatego wykorzystanie funkcji i miksinów pomaga zachować prostotę.

2. Abstrahuj za pomocą zmiennych i funkcji

   Jeśli używasz podobnych warunków w wielu miejscach, zebranie ich w zmiennych lub funkcjach ułatwia utrzymanie kodu.

3. Unikaj nadmiernie rozbudowanej logiki

   Maksymalnie ujednolicaj reguły projektowe i unikaj nadużywania warunków.

Wniosek

Instrukcje warunkowe w SASS to bardzo skuteczne narzędzie do tworzenia elastycznych, dynamicznych stylów. Tutaj wyjaśniliśmy wszystko krok po kroku, od podstaw po praktyczne przykłady. Stosując warunki w realnych projektach, projektuj z myślą o reużywalnym kodzie, jednocześnie dbając, aby nadmiernie nie komplikować.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video