Mga kondisyonal sa SASS

Ipinaliliwanag ng artikulong ito ang mga kondisyonal sa SASS.

Malinaw naming ipinapaliwanag ang lahat mula sa mga batayan hanggang sa mas advanced na paggamit ng mga kondisyonal gamit ang mga direktibang @if, @else if, at @else, kalakip ang mga praktikal na halimbawa.

YouTube Video

Mga kondisyonal sa SASS

Ang SASS ay isang wika ng stylesheet na nagpapalawak sa CSS, at maaari mong kontrolin ang mga estilo nang may kakayahang umangkop sa pamamagitan ng mga kondisyonal. Sa SASS, maaari mong gamitin ang @if, @else if, at @else upang magpalit ng kinalalabasang mga estilo sa oras ng pag-compile.

Pangunahing sintaks ng kondisyonal

Ang mga pangunahing kondisyonal sa SASS ay isinusulat gamit ang sumusunod na sintaks.

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}

• Tinatasa ng @if ang unang kondisyon, at kung ito ay false, sinusuri naman nang sunud-sunod ang mga bloke ng @else if o @else.

Payak na halimbawa ng kondisyonal

Sa sumusunod na halimbawa, nagpapalit ang kulay ng background batay sa variable na $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}

Na-compile na CSS

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

• Kapag ang $theme ay "dark", inilalapat ang madilim na background at puting kulay ng teksto.

Pagsasama ng mga kondisyonal at kalkulasyon

Hindi lamang mga paghahambing ng string at kulay ang kaya ng mga kondisyonal, kundi pati mga numerikong kalkulasyon.

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

Na-compile na CSS

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

• Posible rin ang mga paghahambing na numeriko, at kapag lumampas ang $width sa 1000px, inilalabas ang max-width: 1200px.

Mga naka-nest na kondisyonal

Sa pamamagitan ng pag-nest ng mga kondisyonal, maaari mong maipahayag ang mas kumplikadong mga kondisyon.

 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}

Na-compile na CSS

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

• Ang pag-nest ng mga kondisyonal ay nagbibigay-daan sa pag-istilo batay sa parehong tema at sukat.

Paggamit ng mga kondisyonal sa mga custom na function

Ang paggamit ng mga kondisyonal sa loob ng mga custom na function ay maaaring magpahusay sa kakayahang muling magamit.

 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}

Na-compile na CSS

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

• Sa pamamagitan ng pag-encapsulate ng mga kondisyonal sa mga function, mapapataas mo ang kakayahang muling magamit at mapanatili.

Isang praktikal na halimbawa - Pagpapalit ng mga disenyo

Tingnan natin ang isang halimbawa ng pagpapalit ng kabuuang disenyo batay sa ilang kondisyon.

 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}

Na-compile na 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}

• Maaari mong dinamiko na palitan ang color scheme ng buong pahina ayon sa variable na tema.

Mga tala at pinakamahuhusay na gawi

Kapag gumagamit ng mga conditional ng SASS, maaari mong isaalang-alang ang mga sumusunod na punto.

1. Panatilihing simple ang mga kondisyonal

   Nakababawas sa readability ang masalimuot na nesting, kaya makatutulong ang paggamit ng mga function at mga mixin upang manatiling simple.

2. I-abstract gamit ang mga variable at function

   Kung gumagamit ka ng magkakatulad na kondisyon sa maraming lugar, ang pagsasama-sama ng mga ito sa mga variable o function ay nakapagpapabuti sa kakayahang mapanatili.

3. Iwasan ang lumolobong lohika

   Pag-isahin ang mga tuntunin ng disenyo hangga't maaari at iwasan ang labis na paggamit ng mga kondisyonal.

Konklusyon

Ang mga kondisyonal sa SASS ay isang napakaepektibong kasangkapan para sa paglikha ng mga estilong may kakayahang umangkop at dinamiko. Dito, ipinaliwanag namin ang lahat nang sunod-sunod mula sa mga batayan hanggang sa mga praktikal na halimbawa. Kapag gumagamit ng mga kondisyonal sa mga totoong proyekto, magdisenyo nang may pagsasaalang-alang sa muling magagamit na code at mag-ingat na huwag gawing labis na komplikado ang mga bagay.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video