Kondisional di SASS

Artikel ini menjelaskan kondisional di SASS.

Kami menjelaskan dengan jelas segala hal mulai dari dasar hingga penggunaan tingkat lanjut dari kondisional dengan direktif @if, @else if, dan @else, disertai contoh praktis.

YouTube Video

Kondisional di SASS

SASS adalah bahasa lembar gaya yang memperluas CSS, dan Anda dapat mengontrol gaya secara fleksibel menggunakan kondisional. Di SASS, Anda dapat menggunakan @if, @else if, dan @else untuk mengubah output gaya pada saat kompilasi.

Sintaks kondisional dasar

Kondisional dasar di SASS ditulis dengan sintaks berikut.

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 mengevaluasi kondisi pertama, dan jika bernilai false, blok @else if atau @else dievaluasi secara berurutan.

Contoh kondisional sederhana

Pada contoh berikut, warna latar belakang berganti berdasarkan variabel $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}

CSS yang dikompilasi

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

• Ketika $theme bernilai "dark", latar belakang gelap dan warna teks putih akan diterapkan.

Menggabungkan kondisional dengan perhitungan

Kondisional tidak hanya menangani perbandingan string dan warna, tetapi juga perhitungan numerik.

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

CSS yang dikompilasi

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

• Perbandingan numerik juga dimungkinkan, dan ketika $width melebihi 1000px, max-width: 1200px akan dihasilkan.

Kondisional bersarang

Dengan membuat kondisional bersarang, Anda dapat mengekspresikan kondisi yang kompleks.

 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}

CSS yang dikompilasi

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

• Kondisional bersarang memungkinkan penataan gaya berdasarkan tema dan ukuran sekaligus.

Menggunakan kondisional dalam fungsi kustom

Menggunakan kondisional di dalam fungsi kustom dapat meningkatkan reusabilitas.

 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}

CSS yang dikompilasi

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

• Dengan mengenkapsulasi kondisional di dalam fungsi, Anda dapat meningkatkan reusabilitas dan kemudahan pemeliharaan.

Contoh praktis - Mengalihkan desain

Mari kita lihat contoh mengubah desain keseluruhan berdasarkan kondisi tertentu.

 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}

CSS yang dikompilasi

1body {
2  font-family: Arial, sans-serif;
3  background-color: #f9f9f9;
4  color: #333;
5}
6
7header {
8  border-bottom: 1px solid #ccc;
9}

• Anda dapat secara dinamis mengganti skema warna seluruh halaman sesuai variabel tema.

Catatan dan praktik terbaik

Saat menggunakan kondisional SASS, Anda dapat mempertimbangkan poin-poin berikut.

1. Jaga kondisional tetap sederhana

   Kondisional bersarang yang kompleks mengurangi keterbacaan, jadi memanfaatkan fungsi dan mixin membantu menjaga semuanya tetap sederhana.

2. Abstraksikan dengan variabel dan fungsi

   Jika Anda menggunakan kondisi serupa di banyak tempat, mengonsolidasikannya ke dalam variabel atau fungsi akan meningkatkan kemudahan pemeliharaan.

3. Cegah logika yang berlebihan

   Samakan aturan desain sejauh mungkin dan hindari penggunaan kondisional yang berlebihan.

Kesimpulan

Kondisional di SASS adalah alat yang sangat efektif untuk membuat gaya yang fleksibel dan dinamis. Di sini, kami menjelaskan semuanya selangkah demi selangkah mulai dari dasar hingga contoh praktis. Saat menggunakan kondisional dalam proyek nyata, rancang dengan mempertimbangkan kode yang dapat digunakan ulang sambil tetap berhati-hati agar tidak membuatnya terlalu rumit.

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

YouTube Video