Daftar di SASS

Artikel ini menjelaskan tentang daftar di SASS.

Kami akan membahas penggunaan dasar dan lanjutan dari daftar SASS serta memberikan contoh praktis.

YouTube Video

Daftar di SASS

SASS menawarkan fitur-fitur seperti pemrograman yang berguna sebagai ekstensi dari CSS. Di antara fitur tersebut, daftar merupakan fitur yang sangat berguna saat mendefinisikan gaya secara dinamis.

Apa itu Daftar SASS?

Daftar SASS adalah sekumpulan nilai yang dipisahkan oleh koma (,) atau spasi. Daftar digunakan saat meneruskan beberapa nilai ke properti CSS atau melakukan iterasi.

1// Comma-separated list
2$comma-list: 1px, 2px, 3px;
3
4// Space-separated list
5$space-list: bold italic 16px Arial;

Fitur utama daftar meliputi poin-poin berikut:.

  • Daftar dapat berisi nilai dengan tipe data apa pun, seperti angka, string, atau warna.
  • Anda dapat memilih antara daftar yang dipisahkan koma atau spasi, tergantung pada kasus penggunaannya.

Contoh Dasar Definisi Gaya Menggunakan Daftar

Berikut adalah contoh pembuatan gaya border sederhana secara dinamis menggunakan daftar.

 1@use "sass:list";
 2
 3$border-widths: 1px, 2px, 3px;
 4
 5.border-example {
 6  @for $i from 1 through list.length($border-widths) {
 7    &-#{list.nth($border-widths, $i)} {
 8      border-width: list.nth($border-widths, $i);
 9    }
10  }
11}

Hasil Kompilasi

 1.border-example-1px {
 2  border-width: 1px;
 3}
 4
 5.border-example-2px {
 6  border-width: 2px;
 7}
 8
 9.border-example-3px {
10  border-width: 3px;
11}
  • Dengan fungsi nth() dari modul sass:list, Anda dapat mengambil nilai tertentu dari sebuah daftar.

Manipulasi Daftar

Modul sass:list menyediakan fungsi-fungsi untuk memanipulasi daftar, sehingga memudahkan untuk mengambil dan menambahkan elemen.

Mengambil Elemen: nth()

nth() adalah fungsi untuk mengambil elemen dari sebuah daftar.

1@use "sass:list";
2
3$colors: red, green, blue;
4$first-color: list.nth($colors, 1); // red
  • Pada kode ini, fungsi nth() digunakan untuk mendapatkan nilai pada indeks yang ditentukan.

Periksa Indeks: index()

index() adalah fungsi yang mengembalikan posisi suatu elemen di dalam daftar.

1@use "sass:list";
2
3$colors: red, green, blue;
4$position: list.index($colors, blue); // 3
  • Pada kode ini, index() digunakan untuk mendapatkan bahwa elemen blue adalah item ketiga dalam daftar.

Mendapatkan Panjang Daftar: length()

length() adalah fungsi yang mengembalikan panjang sebuah daftar.

1@use "sass:list";
2
3$fonts: Arial, Helvetica, sans-serif;
4$count: list.length($fonts); // 3
  • Pada kode ini, fungsi length() digunakan untuk mendapatkan jumlah nilai dalam daftar.

Menambahkan Elemen: append()

append() adalah fungsi untuk menambahkan elemen ke sebuah daftar.

1@use "sass:list";
2
3$shapes: circle, square;
4$shapes: list.append($shapes, triangle); // circle, square, triangle
  • Pada kode ini, fungsi append() digunakan untuk menambahkan nilai ke dalam daftar.

Ganti Elemen: set-nth()

set-nth() adalah fungsi yang menggantikan elemen pada posisi tertentu dengan nilai lain.

1@use "sass:list";
2
3$colors: red, green, blue;
4$updated: list.set-nth($colors, 2, yellow); // red, yellow, blue
  • Pada kode ini, set-nth() digunakan untuk mengganti elemen kedua dengan yellow.

Gabungkan Daftar: join()

join() adalah fungsi yang menggabungkan dua daftar.

1@use "sass:list";
2
3$list1: a, b;
4$list2: c, d;
5$combined: list.join($list1, $list2); // a, b, c, d
  • Pada kode ini, join() digunakan untuk menggabungkan dua daftar menjadi satu.

Pasangkan Daftar: zip()

zip() adalah fungsi yang mengelompokkan beberapa daftar berdasarkan elemen demi elemen.

1@use "sass:list";
2
3$names: alice, bob;
4$ages: 20, 30;
5$zipped: list.zip($names, $ages); // (alice 20, bob 30)
  • Pada kode ini, zip() digunakan untuk menggabungkan nama dan usia sebagai pasangan.

Daftar Bersarang

Daftar juga dapat bersarang, sehingga dapat digunakan seperti array dua dimensi.

1@use "sass:list";
2
3$nested-list: (red, green), (blue, yellow);
4
5// Accessing elements of a nested list
6$first-sublist: list.nth($nested-list, 1); // (red, green)
7$first-color: list.nth(list.nth($nested-list, 1), 1); // red
  • Dengan menangani struktur data yang kompleks seperti itu, pembuatan gaya yang lebih maju menjadi mungkin.

Contoh Praktis: Membuat Gradien

Berikut ini adalah contoh membuat gradien dengan efisien menggunakan daftar.

 1@use "sass:list";
 2@use "sass:math";
 3
 4$colors: red, orange, yellow, green, blue;
 5
 6@function gradient($colors) {
 7  $gradient: ();
 8  $len: list.length($colors);
 9
10  @for $i from 1 through $len {
11    // build "color percent%" string with interpolation
12    $item: "#{list.nth($colors, $i)} #{math.div(100%, $len) * $i}";
13    $gradient: list.append($gradient, $item);
14  }
15
16  @return $gradient;
17}
18
19.background {
20  background: linear-gradient(to right, #{list.join(gradient($colors), ', ')});
21}

Hasil Kompilasi

1.background {
2	background: linear-gradient(to right, red 20%, orange 40%, yellow 60%, green 80%, blue 100%);
3}
  • Kode ini adalah contoh pembuatan gradien secara otomatis menggunakan daftar di SCSS.

    • Warna yang digunakan untuk gradien didefinisikan dalam daftar $colors.
    • Pada fungsi gradient(), posisi dihitung dan diberikan secara merata ke setiap warna berdasarkan jumlah warna, sehingga membentuk daftar untuk gradien.
    • Pada kelas .background, linear-gradient digunakan untuk menggabungkan daftar warna yang dihasilkan dan menerapkan gradien horizontal.
  • Karena posisi secara otomatis dihitung sesuai dengan panjang daftar warna, Anda dapat dengan mudah membuat gradien yang merata hanya dengan menambah atau mengubah warna.

Perhatian dan Praktik Terbaik

Hal-hal berikut dapat dipertimbangkan saat menggunakan daftar:.

  • Jenis Pemisah Daftar Daftar yang dipisahkan koma dan spasi diperlakukan secara berbeda, jadi Anda perlu memilih sesuai dengan situasinya.

  • Ukuran Daftar Saat memanipulasi daftar secara dinamis, sebaiknya periksa ukuran daftar menggunakan fungsi length().

  • Mengelola Daftar Bersarang Saat menangani daftar bersarang, pengelolaan indeks yang hati-hati dapat membantu menghindari kesalahan.

Kesimpulan

Daftar SASS adalah alat yang kuat untuk mendefinisikan gaya secara dinamis dan mengelola desain yang kompleks dengan efisien.

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

YouTube Video