Articles
Panimula sa SASS/SCSS
Ang `if` function sa SASS

Ang `if` function sa SASS

Ipinaliliwanag ng artikulong ito ang if function sa SASS.

Tatalakayin natin ang lahat mula sa mga batayan ng if function hanggang sa mga advanced na teknik, hakbang-hakbang.

YouTube Video

Ang if function sa SASS

Ang if() ay isang payak na conditional function na ibinibigay ng SASS na nagbabalik ng isa sa dalawang halaga batay sa isang boolean na kondisyon. Kahawig ito ng ternary operator sa JavaScript.

Sintaks

Ganito ang syntax:.

1// if(condition, trueValue, falseValue)
  • Kung ang condition ay true, ibinabalik nito ang trueValue; kung false, ibinabalik nito ang falseValue.

Pangunahing Paggamit

Halimbawa, maaari mong gamitin ang if() function upang baguhin ang mga kulay ng background at teksto depende kung dark o light ang tema.

Halimbawang Kodigo 

1$theme: "dark";
2
3$background-color: if($theme == "dark", black, white);
4$text-color: if($theme == "dark", white, black);
5
6body {
7  background-color: $background-color;
8  color: $text-color;
9}
  • Kung ang variable na $theme ay "dark", magiging itim ang background na may puting teksto; kung "light", magiging puti ang background na may itim na teksto.

Ang nalikhang CSS 

1body {
2  background-color: black;
3  color: white;
4}
  • Dahil ang variable na $theme ay "dark", ang background ay itim na may puting teksto.

Mga pagkakaiba sa pagitan ng statement na @if at ng function na if()

Nagbibigay ang Sass ng statement na @if at ng function na if() para sa conditional branching, ngunit ginagamit ang mga ito para sa iba’t ibang layunin.

Halimbawang Kodigo 

 1$theme: "dark";
 2
 3// `@if` statement: Compile-time branching (syntax level)
 4$background-color: null;
 5@if $theme == "dark" {
 6  $background-color: black;
 7} @else if $theme == "light" {
 8  $background-color: white;
 9} @else {
10  $background-color: gray;
11}
12
13// `if()` function: Returns a value (expression level)
14$text-color: if($theme == "dark", white, black);
15
16body {
17  background-color: $background-color;
18  color: $text-color;
19}
  • Kinokontrol ng statement na @if kung aling code ang ilalabas sa oras ng pag-compile ng Sass.
  • Samantala, ang function na if() ay nagbabalik ng isang halaga at ginagamit upang magpalit ng mga halaga nang dinamiko sa loob ng mga expression.

Ang nalikhang CSS 

1body {
2  background-color: black;
3  color: white;
4}
  • Sa halimbawang ito, dahil ang $theme ay "dark", ilalapat ang itim na background at puting kulay ng teksto.
  • Ang dalawang pangunahing pagkakaiba ay: ang statement na @if ang kumokontrol sa istruktura, at ang function na if() ay nagbabalik ng isang halaga.

Paggamit ng nested na mga if function

Kapag kailangan mo ng kumplikadong branching, maaari mong i-nest ang mga if function.

Halimbawang Kodigo 

 1$theme: "custom";
 2$custom-color: blue;
 3
 4$background-color: if(
 5  $theme == "dark",
 6  black,
 7  if(
 8    $theme == "light",
 9    white,
10    $custom-color
11  )
12);
13
14body {
15  background-color: $background-color;
16}
  • Kung ang $theme ay "dark", ibinabalik nito ang itim; kung "light", ibinabalik ang puti; kung hindi, ibinabalik ang default na halaga ($custom-color).

Ang nalikhang CSS 

1body {
2  background-color: blue;
3}
  • Dahil ang variable na $theme ay custom, asul ang kulay ng background.

Mga praktikal na paggamit

Pagpapalit ng tema

Narito ang isang halimbawa na nagpapalit ng mga estilo ng button batay sa tema.

1$theme: "dark";
2
3.button {
4  background-color: if($theme == "dark", #333, #fff);
5  color: if($theme == "dark", #fff, #333);
6  border: 1px solid if($theme == "dark", #444, #ccc);
7}
  • Ang code na ito ay isang halimbawa ng SASS conditional na nagpapalit ng mga kulay ng background, teksto, at border ng button batay sa halaga ng variable na $theme. Ginagamit ang if() function upang dynamic na itakda ang mga estilo para sa dark at light na mga tema.

Ang nalikhang CSS 

1.button {
2  background-color: #333;
3  color: #fff;
4  border: 1px solid #444;
5}
  • Sa pamamagitan ng pagpapalit ng tema, maaari mong baguhin nang pare-pareho ang kabuuang disenyo.

Advanced na halimbawa: Dynamic na pagtatakda ng contrast ng kulay

Tingnan natin ang isang halimbawa na awtomatikong nagtatalaga ng kulay ng teksto batay sa kulay ng background.

Halimbawang Kodigo 

 1@use "sass:color";
 2
 3$background-color: #000;
 4
 5$text-color: if(
 6  color.channel($background-color, "lightness", $space: hsl) > 50%,
 7  black,
 8  white
 9);
10
11body {
12  background-color: $background-color;
13  color: $text-color;
14}
  • Ginagamit ang function na color.channel() upang makuha ang lightness ng kulay ng background (lightness). Kung ang halagang iyon ay mas malaki sa 50%, itim ang pipiliin; kung mas maliit, puti ang pipiliin bilang kulay ng teksto, na awtomatikong pinapainam ang contrast sa background.

Ang nalikhang CSS 

1body {
2  background-color: #000;
3  color: white;
4}
  • Sa pamamagitan ng paggamit ng function na if(), maaari kang magpatupad ng mga flexible na estilo na isinasaalang-alang ang accessibility ng disenyo, gaya ng pagsasaayos ng contrast.

Pagsasama sa @function

Ang paggamit ng if function sa loob ng isang @function ay nagbibigay-daan sa mas flexible na disenyo ng mga estilo.

Halimbawang Kodigo 

 1@function theme-color($theme, $type) {
 2  @return if(
 3    $theme == "dark",
 4    if(
 5      $type == "background",
 6      black,
 7      white
 8    ),
 9    if(
10      $type == "background",
11      white,
12      black
13    )
14  );
15}
16
17body {
18  background-color: theme-color("dark", "background");
19  color: theme-color("dark", "text");
20}
  • Ipinapakita ng code na ito ang paggamit ng if() sa loob ng isang @function upang magbalik ng angkop na mga kulay batay sa tema at uri ng kulay. Nagbibigay-daan ito sa pare-pareho at muling nagagamit na disenyo ng mga estilo para sa bawat tema.

Ang nalikhang CSS 

1body {
2  background-color: black;
3  color: white;
4}
  • Sa paglikha at paggamit ng mga helper function na nakikinabang sa function na if(), mapapabuti mo ang maintainability ng buong proyekto.

Mga Tala

  1. Hindi magagamit ang if function sa mga dynamic na halaga Dahil ang CSS mismo ay isang static na wika, tinutukoy ng if function ang mga halaga sa oras ng pag-compile ng SASS. Para sa conditional logic sa runtime, kailangan mong gumamit ng JavaScript.

  2. Unahin ang readability Dahil ang mga if function na naka-nest ay maaaring maging kumplikado at makabawas sa pagiging madaling basahin, maaari mong gamitin ang SASS @mixin at @function kung kinakailangan upang ayusin ang iyong code.

Konklusyon

Ang if function ng SASS ay isang makapangyarihang kasangkapan na nagbabalik ng iba't ibang halaga depende sa mga kondisyon. Kapaki-pakinabang ito hindi lamang para sa mga simpleng conditional, kundi pati na rin sa maraming sitwasyon tulad ng pagpapalit ng tema at dynamic na pagtatakda ng mga estilo. Gayunman, kapag humaharap sa mga kumplikadong kondisyon, bigyang-pansin ang readability at gamitin ang @mixin at @function upang mapabuti ang maintainability.

Sa paghasa sa if function, makakamit mo ang mas episyente at mas flexible na disenyo ng mga estilo.

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

Mga kondisyonal sa SASSIterasyon sa SASS