Kondisional dalam SASS

Artikel ini menerangkan kondisional dalam SASS.

Kami menerangkan dengan jelas segala-galanya daripada asas hingga penggunaan lanjutan kondisional dengan direktif @if, @else if, dan @else, berserta contoh praktikal.

YouTube Video

Kondisional dalam SASS

SASS ialah bahasa lembaran gaya yang memperluas CSS, dan anda boleh mengawal gaya dengan fleksibel menggunakan kondisional. Dalam SASS, anda boleh menggunakan @if, @else if, dan @else untuk menukar output gaya ketika proses kompilasi.

Sintaks kondisional asas

Kondisional asas dalam 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 menilai syarat pertama, dan jika ia tidak benar, blok @else if atau @else akan dinilai mengikut turutan.

Contoh kondisional ringkas

Dalam contoh berikut, warna latar berubah berdasarkan pembolehubah $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 terkompil

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

• Apabila $theme ialah "dark", latar gelap dan warna teks putih akan digunakan.

Menggabungkan kondisional dengan pengiraan

Kondisional bukan sahaja mengendalikan perbandingan rentetan dan warna, malah pengiraan berangka.

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

CSS terkompil

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

• Perbandingan berangka juga boleh dilakukan, dan apabila $width melebihi 1000px, max-width: 1200px akan dikeluarkan.

Kondisional bersarang

Dengan membuat kondisional bersarang, anda boleh menyatakan syarat 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 terkompil

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

• Kondisional bersarang membolehkan penggayaan berdasarkan kedua-dua tema dan saiz.

Menggunakan kondisional dalam fungsi tersuai

Menggunakan kondisional dalam fungsi tersuai boleh meningkatkan kebolehgunaan semula.

 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 terkompil

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

• Dengan mengkapsulkan kondisional dalam fungsi, anda boleh meningkatkan kebolehgunaan semula dan kebolehselenggaraan.

Contoh praktikal - Menukar reka bentuk

Mari lihat contoh menukar reka bentuk keseluruhan berdasarkan syarat 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 terkompil

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 boleh menukar skema warna keseluruhan halaman secara dinamik mengikut pembolehubah tema.

Nota dan amalan terbaik

Apabila menggunakan pernyataan bersyarat SASS, anda boleh mempertimbangkan perkara berikut.

1. Pastikan kondisional ringkas

   Penyarangan yang kompleks menjejaskan keterbacaan, jadi memanfaatkan fungsi dan mixin membantu memastikan ia kekal ringkas.

2. Abstrakkan dengan pembolehubah dan fungsi

   Jika anda menggunakan syarat yang serupa di pelbagai tempat, menyatukannya ke dalam pembolehubah atau fungsi akan meningkatkan kebolehselenggaraan.

3. Cegah logik yang berlebihan

   Seragamkan peraturan reka bentuk sebanyak mungkin dan elakkan penggunaan kondisional secara berlebihan.

Kesimpulan

Kondisional dalam SASS ialah alat yang amat berkesan untuk mencipta gaya yang fleksibel dan dinamik. Di sini, kami menerangkan semuanya langkah demi langkah daripada asas hingga contoh praktikal. Apabila menggunakan kondisional dalam projek sebenar, reka dengan mengambil kira kod yang boleh diguna semula sambil berhati-hati agar tidak terlalu mempersulitkan keadaan.

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

YouTube Video