Articles
Pengenalan kepada SASS/SCSS
Peta dalam SASS

Peta dalam SASS

Artikel ini menerangkan peta dalam SASS.

Kami akan menerangkan asas hingga penggunaan lanjutan peta SASS, dan menyediakan contoh praktikal.

YouTube Video

Peta dalam SASS

Apakah itu Peta dalam SASS?

Peta dalam SASS ialah struktur data yang menyimpan pasangan kunci-nilai, serupa dengan objek dalam JavaScript atau kamus dalam Python. Dengan menggunakan peta dalam SASS, anda boleh mengurus gaya yang kompleks dengan ringkas dan meningkatkan kebolehselenggaraan.

Sintaks Asas Peta

Peta dalam SASS ditakrifkan menggunakan () (kurungan). Sintaksnya adalah seperti berikut:.

1$map-name: (
2  key1: value1,
3  key2: value2,
4  key3: value3
5);

Sebagai contoh, untuk mencipta peta bagi mengurus tema warna, anda boleh mentakrifkannya seperti di bawah:.

1$colors: (
2  primary: #3498db,
3  secondary: #2ecc71,
4  danger: #e74c3c
5);

Mendapatkan Nilai daripada Peta

Dalam SASS, anda menggunakan fungsi map.get() untuk mendapatkan nilai daripada peta.

Contoh penggunaan: 

 1@use "sass:map";
 2
 3$colors: (
 4  primary: #3498db,
 5  secondary: #2ecc71
 6);
 7
 8.button {
 9  background-color: map.get($colors, primary);
10}

Output: 

1.button {
2  background-color: #3498db;
3}
  • Kod ini mendapat nilai warna primary daripada peta $colors dan menggunakannya sebagai warna latar belakang butang.

Menetapkan Kunci dan Nilai dalam Peta

Dengan menggunakan fungsi map.set(), anda boleh menetapkan nilai baru kepada kunci yang ditentukan. Jika kunci itu sudah wujud, nilainya akan ditulis ganti.

Contoh Penggunaan 

 1@use "sass:map";
 2
 3$colors: (
 4  primary: #3498db,
 5  secondary: #2ecc71
 6);
 7
 8// set danger color
 9$updated-colors: map.set($colors, danger, #e74c3c);
10
11.button-danger {
12  background-color: map.get($updated-colors, danger);
13}
  • Kod ini menambah kunci danger ke peta dan menetapkan nilainya sebagai warna latar belakang butang.

Output 

1.button-danger {
2  background-color: #e74c3c;
3}

Memadam Kunci daripada Peta

Dengan menggunakan fungsi map.remove(), anda boleh memadam kunci tertentu dan nilainya daripada peta.

Contoh Penggunaan 

 1@use "sass:map";
 2
 3$colors: (
 4  primary: #3498db,
 5  secondary: #2ecc71,
 6  danger: #e74c3c
 7);
 8
 9// remove danger color
10$reduced-colors: map.remove($colors, danger);
11
12.button-primary {
13  background-color: map.get($reduced-colors, primary);
14}
15
16.button-danger {
17  background-color: map.get($reduced-colors, danger);
18}
  • Kod ini memadam kunci danger daripada peta, jadi warna latar belakang button-danger akan menjadi null.

Output 

1.button-primary {
2  background-color: #3498db;
3}

Menambah Kunci dan Nilai ke dalam Peta

Dengan menggunakan fungsi map.merge(), anda boleh menambah kunci dan nilai baru ke dalam peta sedia ada.

Contoh Penggunaan 

 1@use "sass:map";
 2
 3$colors: (
 4  primary: #3498db,
 5  secondary: #2ecc71
 6);
 7
 8$extended-colors: map.merge($colors, (danger: #e74c3c));
 9
10.button-danger {
11  background-color: map.get($extended-colors, danger);
12}
  • Kod ini menambah kunci danger ke peta SASS sedia ada dan menetapkan warnanya sebagai warna latar belakang butang.

Output 

1.button-danger {
2  background-color: #e74c3c;
3}

Menambah Beberapa Kunci dan Nilai ke dalam Peta

Dengan fungsi map.merge(), anda boleh menambah beberapa kunci dan nilai baru ke dalam peta sedia ada secara serentak.

Contoh Penggunaan 

 1@use "sass:map";
 2
 3$colors: (
 4  primary: #3498db,
 5  secondary: #2ecc71
 6);
 7
 8$extended-colors: map.merge($colors, (
 9  danger: #e74c3c,
10  warning: #f39c12,
11  info: #8e44ad
12));
13
14.button-danger {
15  background-color: map.get($extended-colors, danger);
16}
  • Kod ini menambah beberapa kunci dan nilai secara serentak ke dalam peta SASS sedia ada.

Menyemak Kunci dalam Peta

Fungsi map.has-key() membolehkan anda menyemak jika kunci tertentu wujud dalam peta.

Contoh Penggunaan 

1@use "sass:map";
2
3$colors: (
4  primary: #3498db,
5  secondary: #2ecc71
6);
7
8@debug map.has-key($colors, primary); // true
9@debug map.has-key($colors, danger);  // false

Mendapat Semua Kunci atau Nilai daripada Peta

Mendapatkan semua kunci

Dengan fungsi map.keys(), anda boleh mendapatkan semua kunci.

1@use "sass:map";
2
3$colors: (
4  primary: #3498db,
5  secondary: #2ecc71
6);
7
8@debug map.keys($colors); // (primary, secondary)

Mendapatkan semua nilai

Dengan fungsi map.values(), anda boleh mendapatkan semua nilai.

1@use "sass:map";
2
3$colors: (
4  primary: #3498db,
5  secondary: #2ecc71
6);
7
8@debug map.values($colors); // (#3498db, #2ecc71)

Melakukan Gelung dalam Peta

Dalam SASS, anda boleh menggunakan arahan @each untuk melakukan gelung dalam peta.

Contoh Penggunaan 

 1$colors: (
 2  primary: #3498db,
 3  secondary: #2ecc71,
 4  danger: #e74c3c
 5);
 6
 7@each $name, $color in $colors {
 8  .color-#{$name} {
 9    background-color: $color;
10  }
11}
  • Kod ini menggulung setiap kunci dan nilai dalam peta SASS dan secara automatik menjana kelas untuk setiap warna.

Output 

 1.color-primary {
 2  background-color: #3498db;
 3}
 4
 5.color-secondary {
 6  background-color: #2ecc71;
 7}
 8
 9.color-danger {
10  background-color: #e74c3c;
11}

Mengendalikan Peta Bersarang

Peta juga boleh mempunyai struktur bersarang. Dalam kes ini, gunakan fungsi map.get() secara bersarang.

Contoh Penggunaan 

 1@use "sass:map";
 2
 3$themes: (
 4  light: (
 5    background: #ffffff,
 6    text: #000000
 7  ),
 8  dark: (
 9    background: #000000,
10    text: #ffffff
11  )
12);
13
14body {
15  background-color: map.get(map.get($themes, light), background);
16  color: map.get(map.get($themes, light), text);
17}
  • Kod ini mendapat warna latar belakang dan teks untuk tema light daripada peta SASS bersarang dan menggunakannya pada body.

Output 

1body {
2  background-color: #ffffff;
3  color: #000000;
4}

Contoh Penggunaan Peta: Reka Bentuk Responsif

Dengan menggunakan peta, anda boleh mengurus media query dan reka bentuk responsif dengan mudah.

Contoh Penggunaan 

 1$breakpoints: (
 2  small: 480px,
 3  medium: 768px,
 4  large: 1024px
 5);
 6
 7@each $label, $size in $breakpoints {
 8  @media (max-width: $size) {
 9    .container-#{$label} {
10      width: 100%;
11    }
12  }
13}
  • Kod ini menggunakan peta SASS untuk menjana kelas bekas responsif secara automatik untuk setiap breakpoint.

Output 

 1@media (max-width: 480px) {
 2  .container-small {
 3    width: 100%;
 4  }
 5}
 6
 7@media (max-width: 768px) {
 8  .container-medium {
 9    width: 100%;
10  }
11}
12
13@media (max-width: 1024px) {
14  .container-large {
15    width: 100%;
16  }
17}

Kesimpulan

Peta SASS adalah alat yang berkuasa untuk mengatur stylesheet anda, meningkatkan fleksibiliti dan boleh guna semula. Ia boleh digunakan dalam pelbagai situasi, seperti pengurusan nilai, gelung, dan pelaksanaan reka bentuk responsif.

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

YouTube Video

Senarai dalam SASSPenetasan dalam SASS