Articles
Pendahuluan ke SASS/SCSS
Iterasi dalam SASS

Iterasi dalam SASS

Artikel ini menjelaskan cara menangani iterasi dalam SASS.

Kami akan menjelaskan cara melakukan iterasi pada SASS langkah demi langkah dengan menggunakan contoh kode nyata.

YouTube Video

Iterasi dalam SASS

Iterasi dalam SASS membantu menghindari duplikasi kode dan memungkinkan Anda membuat gaya yang fleksibel dan dapat digunakan kembali.

Alasan menggunakan iterasi dalam SASS

Ada beberapa keuntungan menggunakan iterasi, seperti berikut ini:.

  • Daya pakai ulang kode meningkat, sehingga memudahkan pembuatan gaya pola yang serupa.
  • Kemudahan pemeliharaan meningkat, sehingga memudahkan dalam mengubah gaya secara sekaligus.
  • Juga mengurangi kesalahan.

Misalnya, Anda dapat membuat gaya untuk tombol dengan warna berbeda atau komponen dengan berbagai ukuran sekaligus.

Sintaksis yang digunakan untuk iterasi di SASS

Sintaks utama yang digunakan untuk iterasi di SASS adalah sebagai berikut:.

  • Dengan menggunakan @for, Anda dapat melakukan iterasi pada rentang angka tertentu.
  • Dengan menggunakan @each, Anda dapat melakukan loop pada daftar (list) atau peta (map) dalam iterasi Anda.
  • Dengan menggunakan @while, Anda dapat melakukan loop hingga kondisi tertentu terpenuhi.

Iterasi menggunakan @for

@for melakukan proses berulang berdasarkan rentang angka yang ditentukan.

Sintaksis 

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

Contoh

Kode berikut secara otomatis menghasilkan kelas dengan lebar border yang meningkat setiap 1px.

1@for $i from 1 through 5 {
2  .border-#{$i} {
3    border-width: #{$i}px;
4  }
5}
  • Kode ini secara otomatis membuat kelas dengan ketebalan border yang bertambah 1px setiap kali. Direktif @for digunakan di sini untuk melakukan loop 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 dibuat secara berurutan, masing-masing dengan ketebalan border meningkat 1px.

Iterasi menggunakan @each

@each melakukan loop menggunakan daftar (list) atau peta (map). Ini berguna saat Anda ingin menghasilkan kelas berpola secara efisien.

Sintaksis 

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

Contoh 1: Menggunakan List

Kode berikut menghasilkan beberapa kelas warna teks.

1@each $color in ("red", "blue", "green") {
2  .text-#{$color} {
3    color: #{$color};
4  }
5}
  • Kode ini secara otomatis membuat kelas warna teks untuk setiap warna dalam daftar. Direktif @each digunakan untuk memproses setiap nilai dalam daftar 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}
  • Saat file SASS dikompilasi menjadi CSS, kelas seperti .text-red, .text-blue, dan .text-green dibuat untuk setiap warna dalam daftar.

Contoh 2: Menggunakan Map

Menggunakan map memungkinkan Anda menangani pasangan key dan value. Pada contoh berikut, warna latar belakang tombol didefinisikan menggunakan map.

 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}
  • Saat file SASS dikompilasi ke CSS, kelas seperti .bg-primary, .bg-success, dan .bg-danger dibuat untuk setiap key dalam map.

Iterasi menggunakan @while

@while melanjutkan loop selama kondisinya bernilai true.

Sintaksis 

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

Contoh

Misalnya, jika Anda ingin menambah ukuran font secara bertahap, Anda dapat menuliskannya 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 dapat menggunakan direktif @while untuk melakukan pemrosesan iteratif ketika memperbesar ukuran font secara bertahap. Dengan menggunakan variabel $i, kelas secara otomatis dibuat 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}
  • Saat file SASS dikompilasi ke CSS, kelas dengan ukuran font dari 1rem hingga 5rem akan secara otomatis dihasilkan.

Contoh Lanjutan: Menggabungkan Iterasi dan Nesting

Menggabungkan iterasi dengan fitur nesting SASS memungkinkan pembuatan gaya yang lebih canggih.

Contoh

Di bawah ini adalah contoh di mana warna latar belakang dan hover untuk tombol didefinisikan secara bersamaan.

 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 nesting SASS, Anda dapat menghasilkan warna latar belakang tombol dan warna hover sekaligus. Untuk setiap warna dalam peta, sebuah kelas .btn- dibuat dan gaya :hover didefinisikan menggunakan 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}
  • Saat Anda mengonversi file SASS ke CSS, warna latar belakang dan warna hover untuk setiap tombol dihasilkan secara otomatis, dan gaya :hover didefinisikan secara kolektif menggunakan penurunan (nesting).

Poin yang Perlu Diperhatikan Saat Menggunakan Iterasi

Ingatlah poin-poin berikut saat menggunakan iterasi untuk menulis kode lebih efisien dan mudah dibaca.

  1. Hindari nesting yang terlalu dalam Nesting yang terlalu dalam mengurangi keterbacaan, jadi jaga agar seminimal mungkin.

  2. Pertimbangkan dampak terhadap performa Jika terlalu banyak kelas yang dihasilkan akibat iterasi, CSS Anda bisa menjadi terlalu besar.

  3. Gunakan nama variabel yang sesuai Untuk variabel seperti $i atau $item, gunakan nama yang bermakna agar kode Anda lebih mudah dipahami.

Ringkasan

Menggunakan iterasi dalam SASS memungkinkan desain gaya yang efisien dan mudah dikelola. Secara khusus, memilih antara @for, @each, dan @while memungkinkan Anda menghasilkan CSS yang dinamis dan fleksibel.

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

YouTube Video

Fungsi `if` di SASS