Senarai dalam SASS

Artikel ini menerangkan tentang senarai dalam SASS.

Kami akan menerangkan asas dan penggunaan lanjutan senarai SASS serta memberikan contoh praktikal.

YouTube Video

Senarai dalam SASS

SASS menawarkan ciri-ciri seperti pengaturcaraan yang berguna sebagai lanjutan kepada CSS. Antara ciri-ciri ini, senarai adalah sangat berguna apabila menentukan stail secara dinamik.

Apakah itu Senarai SASS?

Senarai SASS ialah koleksi nilai yang dipisahkan dengan koma (,) atau ruang. Ia digunakan apabila menghantar pelbagai nilai kepada sifat 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;

Ciri-ciri utama senarai termasuk perkara berikut:.

• Senarai boleh mengandungi nilai dari sebarang jenis data seperti nombor, rentetan, atau warna.
• Anda boleh memilih antara senarai yang dipisahkan dengan koma atau ruang bergantung pada penggunaan.

Contoh Asas Penentuan Gaya Menggunakan Senarai

Di bawah adalah contoh menjana gaya sempadan ringkas secara dinamik menggunakan senarai.

 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}

Output 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 boleh mendapatkan nilai tertentu daripada sesuatu senarai.

Pengendalian Senarai

Modul sass:list menyediakan fungsi untuk memanipulasi senarai, memudahkan untuk mendapatkan dan menambah elemen..

Dapatkan Elemen: nth()

nth() ialah fungsi yang mendapatkan elemen daripada senarai.

1@use "sass:list";
2
3$colors: red, green, blue;
4$first-color: list.nth($colors, 1); // red

• Dalam kod ini, fungsi nth() digunakan untuk mendapatkan nilai di indeks yang ditetapkan.

Semak Indeks: index()

index() ialah fungsi yang mengembalikan kedudukan sesuatu elemen dalam senarai.

1@use "sass:list";
2
3$colors: red, green, blue;
4$position: list.index($colors, blue); // 3

• Dalam kod ini, index() digunakan untuk mendapatkan bahawa elemen blue adalah item ketiga dalam senarai.

Dapatkan Panjang Senarai: length()

length() ialah fungsi yang mengembalikan panjang sebuah senarai.

1@use "sass:list";
2
3$fonts: Arial, Helvetica, sans-serif;
4$count: list.length($fonts); // 3

• Dalam kod ini, fungsi length() digunakan untuk mendapatkan jumlah nilai dalam senarai.

Tambah Elemen: append()

append() ialah fungsi yang digunakan untuk menambah elemen ke dalam senarai.

1@use "sass:list";
2
3$shapes: circle, square;
4$shapes: list.append($shapes, triangle); // circle, square, triangle

• Dalam kod ini, fungsi append() digunakan untuk menambah nilai ke dalam senarai.

Ganti Elemen: set-nth()

set-nth() ialah fungsi yang menggantikan elemen pada kedudukan 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

• Dalam kod ini, set-nth() digunakan untuk menggantikan elemen kedua dengan yellow.

Gabung Senarai: join()

join() ialah fungsi yang menggabungkan dua senarai.

1@use "sass:list";
2
3$list1: a, b;
4$list2: c, d;
5$combined: list.join($list1, $list2); // a, b, c, d

• Dalam kod ini, join() digunakan untuk menggabungkan dua senarai menjadi satu.

Padankan Senarai: zip()

zip() ialah fungsi yang mengelompokkan beberapa senarai mengikut 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)

• Dalam kod ini, zip() digunakan untuk menggabungkan nama dan umur sebagai pasangan.

Senarai Bersarang

Senarai juga boleh dibersarang, membolehkan ia digunakan seperti tatasusunan 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 mengendalikan struktur data yang kompleks begini, penjanaan gaya lanjutan menjadi mungkin.

Contoh Praktikal: Menjana Gradien

Berikut adalah contoh menjana gradien dengan cekap menggunakan senarai.

 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}

Output Kompilasi

1.background {
2	background: linear-gradient(to right, red 20%, orange 40%, yellow 60%, green 80%, blue 100%);
3}

• Kod ini adalah contoh penjanaan gradien secara automatik menggunakan senarai dalam SCSS.

  • Warna yang digunakan untuk gradien ditakrifkan dalam senarai $colors.
  • Dalam fungsi gradient(), kedudukan dikira dan diedarkan secara sama rata kepada setiap warna berdasarkan jumlah warna, lalu membentuk senarai untuk gradien.
  • Dalam kelas .background, linear-gradient digunakan untuk menggabungkan senarai warna yang dijana dan meletakkan gradien secara melintang.

• Oleh kerana kedudukan dikira secara automatik mengikut panjang senarai warna, anda boleh mencipta gradien sekata dengan mudah dengan menambah atau menukar warna.

Langkah Berhati-hati dan Amalan Terbaik

Perkara berikut boleh diambil kira apabila menggunakan senarai:.

• Jenis Pemisah Senarai Senarai yang dipisahkan dengan koma dan ruang dilayan secara berbeza, jadi anda perlu memilih mengikut kesesuaian.

• Saiz Senarai Apabila mengendalikan senarai secara dinamik, adalah selamat untuk memeriksa saiz menggunakan fungsi length().

• Pengurusan Senarai Bersarang Apabila menguruskan senarai bersarang, operasi indeks yang teliti boleh membantu mengelakkan ralat.

Kesimpulan

Senarai SASS adalah alat yang ampuh untuk menentukan gaya secara dinamik dan mengurus reka bentuk kompleks dengan cekap.

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

YouTube Video