Articles
Pendahuluan ke SASS/SCSS
Fungsi `if` di SASS

Fungsi `if` di SASS

Artikel ini menjelaskan fungsi if di SASS.

Kita akan membahas semuanya mulai dari dasar fungsi if hingga teknik lanjutan, selangkah demi selangkah.

YouTube Video

Fungsi if di SASS

Fungsi if() adalah fungsi kondisional sederhana yang disediakan oleh SASS yang mengembalikan salah satu dari dua nilai berdasarkan kondisi boolean. Ini mirip dengan operator ternary pada JavaScript.

Sintaksis

Sintaksnya sebagai berikut:.

1// if(condition, trueValue, falseValue)
  • Jika condition bernilai true, maka mengembalikan trueValue; jika false, mengembalikan falseValue.

Penggunaan Dasar

Sebagai contoh, Anda dapat menggunakan fungsi if() untuk mengubah warna latar belakang dan teks bergantung pada apakah tema gelap atau terang.

Kode Contoh 

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 variabel $theme bernilai "dark", latar belakangnya menjadi hitam dengan teks putih; jika bernilai "light", latar belakangnya menjadi putih dengan teks hitam.

CSS yang dihasilkan 

1body {
2  background-color: black;
3  color: white;
4}
  • Karena variabel $theme bernilai "dark", latar belakangnya hitam dengan teks putih.

Perbedaan antara pernyataan @if dan fungsi if()

Sass menyediakan pernyataan @if dan fungsi if() untuk percabangan kondisional, namun keduanya digunakan untuk tujuan yang berbeda.

Kode Contoh 

 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 mengontrol kode mana yang dihasilkan pada saat kompilasi Sass.
  • Sebaliknya, fungsi if() mengembalikan nilai dan digunakan untuk memilih nilai secara dinamis di dalam ekspresi.

CSS yang dihasilkan 

1body {
2  background-color: black;
3  color: white;
4}
  • Dalam contoh ini, karena $theme bernilai "dark", latar belakang hitam dan warna teks putih diterapkan.
  • Dua perbedaan utamanya adalah bahwa pernyataan @if mengontrol struktur, dan fungsi if() mengembalikan nilai.

Menggunakan fungsi if bersarang

Saat Anda memerlukan percabangan yang kompleks, Anda dapat menyarang fungsi if.

Kode Contoh 

 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 adalah "dark", mengembalikan hitam; jika "light", mengembalikan putih; jika tidak, mengembalikan nilai default ($custom-color).

CSS yang dihasilkan 

1body {
2  background-color: blue;
3}
  • Karena variabel $theme adalah custom, warna latar belakangnya biru.

Kasus penggunaan praktis

Pengalihan tema

Berikut adalah contoh yang mengubah gaya tombol 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}
  • Kode ini adalah contoh kondisional SASS yang mengganti warna latar belakang, teks, dan border tombol berdasarkan nilai variabel $theme. Fungsi if() digunakan untuk mengatur gaya secara dinamis untuk tema gelap dan terang.

CSS yang dihasilkan 

1.button {
2  background-color: #333;
3  color: #fff;
4  border: 1px solid #444;
5}
  • Dengan mengganti tema, Anda dapat mengubah desain keseluruhan secara seragam.

Contoh lanjutan: Mengatur kontras warna secara dinamis

Mari lihat contoh yang secara otomatis mengatur warna teks berdasarkan warna latar belakang.

Kode Contoh 

 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 kecerahan warna latar belakang (lightness). Jika nilai tersebut lebih besar dari 50%, warna hitam dipilih; jika lebih kecil, warna putih dipilih sebagai warna teks, sehingga secara otomatis mengoptimalkan kontras dengan latar belakang.

CSS yang dihasilkan 

1body {
2  background-color: #000;
3  color: white;
4}
  • Dengan menggunakan fungsi if(), Anda dapat mengimplementasikan gaya yang fleksibel dengan mempertimbangkan aksesibilitas desain, seperti menyesuaikan kontras.

Menggabungkan dengan @function

Menggunakan fungsi if di dalam @function memungkinkan perancangan gaya yang lebih fleksibel.

Kode Contoh 

 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}
  • Kode ini menunjukkan penggunaan if() di dalam @function untuk mengembalikan warna yang sesuai berdasarkan tema dan jenis warna. Ini memungkinkan perancangan gaya yang konsisten dan dapat digunakan kembali untuk setiap tema.

CSS yang dihasilkan 

1body {
2  background-color: black;
3  color: white;
4}
  • Dengan membuat dan menggunakan fungsi pembantu yang memanfaatkan fungsi if(), Anda dapat meningkatkan kemudahan pemeliharaan seluruh proyek.

Catatan

  1. Fungsi if tidak dapat digunakan dengan nilai dinamis Karena CSS sendiri adalah bahasa yang statis, fungsi if menentukan nilai pada saat SASS dikompilasi. Untuk logika kondisional saat runtime, Anda perlu menggunakan JavaScript.

  2. Utamakan keterbacaan Karena fungsi if bersarang dapat menjadi kompleks dan mengurangi keterbacaan, Anda dapat menggunakan SASS @mixin dan @function sesuai kebutuhan untuk menata kode Anda.

Kesimpulan

Fungsi if milik SASS adalah alat yang kuat yang mengembalikan nilai berbeda bergantung pada kondisi. Ini berguna tidak hanya untuk kondisi sederhana, tetapi juga dalam banyak skenario seperti penggantian tema dan pengaturan gaya dinamis. Namun, saat menangani kondisi yang kompleks, perhatikan keterbacaan dan manfaatkan @mixin serta @function untuk meningkatkan keterpeliharaan.

Dengan menguasai fungsi if, Anda dapat mencapai perancangan gaya yang lebih efisien dan fleksibel.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Kondisional di SASS