Fungsi `if` dalam SASS

Artikel ini menerangkan fungsi if dalam SASS.

Kami akan membincangkan segala-galanya daripada asas fungsi if hingga teknik lanjutan, langkah demi langkah.

YouTube Video

Fungsi if dalam SASS

Fungsi if() ialah fungsi bersyarat ringkas yang disediakan oleh SASS yang mengembalikan salah satu daripada dua nilai berdasarkan syarat boolean. Ia serupa dengan operator ternari JavaScript.

Sintaks

Sintaks adalah seperti berikut:.

1// if(condition, trueValue, falseValue)

• Jika condition benar, ia mengembalikan trueValue; jika palsu, ia mengembalikan falseValue.

Penggunaan Asas

Sebagai contoh, anda boleh menggunakan fungsi if() untuk menukar warna latar belakang dan teks bergantung pada sama ada tema gelap atau cerah.

Contoh Kod

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}

• Jika pemboleh ubah $theme ialah "dark", latar belakang menjadi hitam dengan teks putih; jika "light", latar belakang menjadi putih dengan teks hitam.

CSS yang dijana

1body {
2  background-color: black;
3  color: white;
4}

• Oleh kerana pemboleh ubah $theme ialah "dark", latar belakang adalah hitam dengan teks putih.

Perbezaan antara pernyataan @if dan fungsi if()

Sass menyediakan pernyataan @if dan fungsi if() untuk percabangan bersyarat, tetapi kedua-duanya digunakan untuk tujuan yang berbeza.

Contoh Kod

 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}

• Pernyataan @if mengawal kod mana yang dikeluarkan semasa kompilasi Sass.
• Sebaliknya, fungsi if() memulangkan nilai dan digunakan untuk menukar nilai secara dinamik dalam ungkapan.

CSS yang dijana

1body {
2  background-color: black;
3  color: white;
4}

• Dalam contoh ini, memandangkan $theme ialah "dark", latar belakang hitam dan warna teks putih digunakan.
• Dua perbezaan utama ialah pernyataan @if mengawal struktur, manakala fungsi if() memulangkan nilai.

Menggunakan fungsi if bersarang

Apabila anda memerlukan percabangan yang kompleks, anda boleh menyarangkan fungsi if.

Contoh Kod

 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}

• Jika $theme ialah "dark", ia mengembalikan hitam; jika "light", ia mengembalikan putih; jika tidak, ia mengembalikan nilai lalai ($custom-color).

CSS yang dijana

1body {
2  background-color: blue;
3}

• Memandangkan pemboleh ubah $theme ialah custom, warna latar belakang ialah biru.

Kes penggunaan praktikal

Pertukaran tema

Di bawah ialah contoh yang menukar gaya butang berdasarkan 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}

• Kod ini ialah contoh bersyarat SASS yang menukar warna latar belakang, teks dan sempadan butang berdasarkan nilai pemboleh ubah $theme. Fungsi if() digunakan untuk menetapkan gaya secara dinamik bagi tema gelap dan cerah.

CSS yang dijana

1.button {
2  background-color: #333;
3  color: #fff;
4  border: 1px solid #444;
5}

• Dengan menukar tema, anda boleh mengubah reka bentuk keseluruhan secara seragam.

Contoh lanjutan: Menetapkan kontras warna secara dinamik

Mari lihat contoh yang menetapkan warna teks secara automatik berdasarkan warna latar belakang.

Contoh Kod

 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}

• Fungsi color.channel() digunakan untuk mendapatkan nilai kecerahan (lightness) warna latar belakang. Jika nilai itu melebihi 50%, hitam dipilih; jika lebih kecil, putih dipilih sebagai warna teks, sekali gus mengoptimumkan kontras dengan latar belakang secara automatik.

CSS yang dijana

1body {
2  background-color: #000;
3  color: white;
4}

• Dengan menggunakan fungsi if(), anda boleh melaksanakan gaya yang fleksibel yang mengambil kira kebolehcapaian reka bentuk, seperti melaraskan kontras.

Menggabungkan dengan @function

Penggunaan fungsi if di dalam @function membolehkan reka bentuk gaya yang lebih fleksibel.

Contoh Kod

 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}

• Kod ini menunjukkan penggunaan if() dalam @function untuk mengembalikan warna yang sesuai berdasarkan tema dan jenis warna. Ini membolehkan reka bentuk gaya yang konsisten dan boleh diguna semula untuk setiap tema.

CSS yang dijana

1body {
2  background-color: black;
3  color: white;
4}

• Dengan mencipta dan menggunakan fungsi pembantu yang memanfaatkan fungsi if(), anda boleh meningkatkan kebolehselenggaraan keseluruhan projek.

Nota

1. Fungsi if tidak boleh digunakan dengan nilai dinamik Oleh kerana CSS itu sendiri ialah bahasa statik, fungsi if menentukan nilai semasa SASS dikompil. Untuk logik bersyarat pada masa jalan, anda perlu menggunakan JavaScript.

2. Utamakan kebolehbacaan Oleh kerana fungsi if yang bersarang boleh menjadi kompleks dan menjejaskan kebolehbacaan, anda boleh menggunakan SASS @mixin dan @function mengikut keperluan untuk menyusun kod anda.

Kesimpulan

Fungsi if SASS ialah alat yang berkuasa yang mengembalikan nilai berbeza bergantung pada syarat. Ia berguna bukan sahaja untuk syarat ringkas, tetapi juga dalam banyak senario seperti pertukaran tema dan tetapan gaya dinamik. Walau bagaimanapun, apabila berurusan dengan syarat yang kompleks, beri perhatian kepada kebolehbacaan dan manfaatkan @mixin serta @function untuk meningkatkan kebolehselenggaraan.

Dengan menguasai fungsi if, anda boleh mencapai reka bentuk gaya yang lebih cekap dan fleksibel.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video