Articles
Pengenalan kepada SASS/SCSS
Pengulangan dalam SASS

Pengulangan dalam SASS

Artikel ini menerangkan cara mengendalikan pengulangan dalam SASS.

Kami akan menerangkan cara melakukan pengulangan dalam SASS langkah demi langkah, menggunakan contoh kod sebenar.

YouTube Video

Pengulangan dalam SASS

Pengulangan dalam SASS membantu mengelakkan pendua kod dan membolehkan anda mencipta gaya yang fleksibel dan boleh diguna semula.

Sebab menggunakan pengulangan dalam SASS

Terdapat beberapa kelebihan menggunakan pengulangan, seperti berikut:.

  • Kebolehgunaan semula kod bertambah baik, memudahkan penjanaan gaya dengan corak serupa.
  • Penyelenggaraan dipertingkatkan, menjadikan perubahan gaya lebih mudah sekali gus.
  • Juga mengurangkan ralat.

Sebagai contoh, anda boleh menjana gaya untuk butang dengan warna berbeza atau komponen dengan pelbagai saiz sekaligus.

Sintaks yang digunakan untuk pengulangan dalam SASS

Sintaks utama yang digunakan untuk pengulangan dalam SASS adalah seperti berikut:.

  • Dengan menggunakan @for, anda boleh melakukan pengulangan pada julat nombor yang ditentukan.
  • Dengan menggunakan @each, anda boleh mengulangi senarai atau peta (map) dalam pengulangan anda.
  • Dengan menggunakan @while, anda boleh mengulangi sehingga syarat tertentu dipenuhi.

Pengulangan menggunakan @for

@for melaksanakan pemprosesan berulang berdasarkan julat nombor yang ditetapkan.

Sintaks 

1/*
2@for $i from <start> to <end> {
3  ...
4}
5
6@for $i from <start> through <end> {
7  ...
8}
9*/
  • Tentukan nilai permulaan dan penghujung untuk <start> dan <end>. Menggunakan to akan mengecualikan nilai akhir, manakala through akan memasukkannya.

Contoh

Kod berikut secara automatik menjana kelas dengan lebar garis sempadan yang bertambah sebanyak 1px setiap satu.

1@for $i from 1 through 5 {
2  .border-#{$i} {
3    border-width: #{$i}px;
4  }
5}
  • Kod ini secara automatik menjana kelas untuk ketebalan garis sempadan yang bertambah sebanyak 1px setiap satu. Arahan @for digunakan di sini untuk mengulang dari 1 hingga 5.

CSS yang Dihasilkan 

 1.border-1 {
 2  border-width: 1px;
 3}
 4.border-2 {
 5  border-width: 2px;
 6}
 7.border-3 {
 8  border-width: 3px;
 9}
10.border-4 {
11  border-width: 4px;
12}
13.border-5 {
14  border-width: 5px;
15}
  • Kelas dari .border-1 hingga .border-5 akan dijana secara berurutan, dengan setiap garis sempadan bertambah 1px dalam ketebalan.

Pengulangan menggunakan @each

@each mengulangi senarai atau peta (map). Ia berguna apabila anda mahu menjana kelas berpola dengan lebih cekap.

Sintaks 

1/*
2@each $item in <list> {
3  ...
4}
5*/

Contoh 1: Menggunakan Senarai

Kod berikut menjana beberapa kelas warna teks.

1@each $color in ("red", "blue", "green") {
2  .text-#{$color} {
3    color: #{$color};
4  }
5}
  • Kod ini secara automatik menjana kelas warna teks untuk setiap warna dalam senarai. Arahan @each digunakan untuk memproses setiap nilai dalam senarai secara berurutan.

CSS yang Dihasilkan 

1.text-red {
2  color: red;
3}
4.text-blue {
5  color: blue;
6}
7.text-green {
8  color: green;
9}
  • Apabila fail SASS dikompil ke CSS, kelas seperti .text-merah, .text-biru, dan .text-hijau dijana untuk setiap warna dalam senarai.

Contoh 2: Menggunakan Peta (Map)

Menggunakan peta membolehkan anda mengendalikan pasangan kunci dan nilai. Dalam contoh berikut, warna latar butang ditakrifkan menggunakan peta.

 1$colors: (
 2  primary: #3498db,
 3  success: #2ecc71,
 4  danger: #e74c3c
 5);
 6
 7@each $name, $hex in $colors {
 8  .bg-#{$name} {
 9    background-color: #{$hex};
10  }
11}

CSS yang Dihasilkan 

1.bg-primary {
2  background-color: #3498db;
3}
4.bg-success {
5  background-color: #2ecc71;
6}
7.bg-danger {
8  background-color: #e74c3c;
9}
  • Apabila fail SASS dikompil ke CSS, kelas seperti .bg-utama, .bg-berjaya dan .bg-bahaya dijana untuk setiap kunci dalam peta.

Pengulangan menggunakan @while

@while meneruskan pengulangan selagi syarat adalah benar.

Sintaks 

1/*
2@while <condition> {
3  ...
4}
5*/

Contoh

Sebagai contoh, jika anda mahu menambah saiz fon secara berperingkat, anda boleh menulisnya seperti berikut:.

1$i: 1;
2
3@while $i <= 5 {
4  .font-#{$i} {
5    font-size: #{$i}rem;
6  }
7  $i: $i + 1;
8}
  • Anda boleh menggunakan arahan @while untuk pemprosesan berulang apabila menaikkan saiz fon secara berperingkat. Dengan menggunakan pembolehubah $i, kelas-kelas dijana secara automatik untuk nilai dari 1 hingga 5.

CSS yang Dihasilkan 

 1.font-1 {
 2  font-size: 1rem;
 3}
 4.font-2 {
 5  font-size: 2rem;
 6}
 7.font-3 {
 8  font-size: 3rem;
 9}
10.font-4 {
11  font-size: 4rem;
12}
13.font-5 {
14  font-size: 5rem;
15}
  • Apabila fail SASS dikompil ke CSS, kelas dengan saiz fon yang bertambah dari 1rem hingga 5rem dijana secara automatik.

Contoh Lanjutan: Menggabungkan Pengulangan dan Penyanjungan (Nesting)

Menggabungkan pengulangan dengan ciri penyanjungan (nesting) SASS membolehkan penjanaan gaya yang lebih maju.

Contoh

Di bawah ialah contoh di mana warna latar dan hover untuk butang ditakrifkan bersama.

 1@use "sass:color";
 2
 3$colors: (
 4  primary: #3498db,
 5  success: #2ecc71,
 6  danger: #e74c3c
 7);
 8
 9@each $name, $hex in $colors {
10  .btn-#{$name} {
11    background-color: $hex;
12    color: white;
13
14    &:hover {
15      background-color: color.scale($hex, $lightness: -10%);
16    }
17  }
18}
  • Dengan menggabungkan iterasi dan pengelompokan bertingkat (nesting) SASS, anda boleh menghasilkan warna latar belakang butang dan warna hover sekaligus. Untuk setiap warna dalam peta, kelas .btn- dicipta dan gaya :hover ditentukan menggunakan pengelompokan bertingkat (nesting).

CSS yang Dihasilkan 

 1.btn-primary {
 2  background-color: #3498db;
 3  color: white;
 4}
 5.btn-primary:hover {
 6  background-color: #2980b9;
 7}
 8.btn-success {
 9  background-color: #2ecc71;
10  color: white;
11}
12.btn-success:hover {
13  background-color: #27ae60;
14}
15.btn-danger {
16  background-color: #e74c3c;
17  color: white;
18}
19.btn-danger:hover {
20  background-color: #c0392b;
21}
  • Apabila anda menukar fail SASS kepada CSS, warna latar belakang dan warna hover untuk setiap butang akan dijana secara automatik, dan gaya :hover ditakrifkan secara kolektif menggunakan sarang (nesting).

Perkara yang Perlu Diberi Perhatian Semasa Menggunakan Pengulangan

Ambil perhatian terhadap perkara berikut semasa menggunakan pengulangan untuk menulis kod yang lebih cekap dan mudah dibaca.

  1. Elakkan penyanjungan (nesting) yang terlalu mendalam Penyanjungan yang terlalu mendalam mengurangkan kebolehbacaan, jadi kekalkan pada tahap minimum yang diperlukan.

  2. Pertimbangkan kesan terhadap prestasi Jika terlalu banyak kelas dijana melalui pengulangan, CSS anda mungkin menjadi terlalu besar tanpa keperluan.

  3. Gunakan nama pembolehubah yang sesuai Untuk pembolehubah seperti $i atau $item, gunakan nama yang bermakna supaya kod anda lebih mudah difahami.

Ringkasan

Menggunakan pengulangan dalam SASS membolehkan reka bentuk gaya yang cekap dan mudah diselenggara. Secara khusus, memilih antara @for, @each, dan @while membolehkan anda menjana CSS yang dinamik dan fleksibel.

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

YouTube Video

Fungsi `if` dalam SASS