Peta di SASS

Artikel ini menjelaskan tentang peta di SASS.

Kami akan menjelaskan dasar hingga penggunaan lanjutan dari peta SASS, serta memberikan contoh praktis.

YouTube Video

Peta di SASS

Apa itu Peta di SASS?

Peta di SASS adalah struktur data yang berisi pasangan kunci-nilai, mirip dengan objek di JavaScript atau kamus di Python. Dengan menggunakan peta di SASS, Anda dapat mengatur gaya yang kompleks dengan ringkas dan meningkatkan kemudahan pemeliharaan.

Sintaks Dasar Peta

Peta di SASS didefinisikan menggunakan () (tanda kurung). Sintaksnya adalah sebagai berikut:.

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

Sebagai contoh, untuk membuat peta guna mengatur tema warna, Anda dapat mendefinisikannya seperti di bawah ini:.

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

Mendapatkan Nilai dari Peta

Di SASS, Anda menggunakan fungsi map.get() untuk mengambil nilai dari sebuah 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}

Keluaran:

1.button {
2  background-color: #3498db;
3}
  • Kode ini mengambil nilai warna primary dari peta $colors dan menerapkannya ke warna latar tombol.

Menetapkan Kunci dan Nilai dalam Peta

Dengan menggunakan fungsi map.set(), Anda dapat menetapkan nilai baru pada kunci tertentu. Jika kunci sudah ada, nilainya akan ditimpa.

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}
  • Kode ini menambahkan kunci danger ke peta dan menjadikan nilainya sebagai warna latar tombol.

Keluaran

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

Menghapus Kunci dari Peta

Dengan menggunakan fungsi map.remove(), Anda dapat menghapus kunci dan nilai tertentu dari sebuah 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}
  • Kode ini menghapus kunci danger dari peta, sehingga warna latar button-danger akan menjadi null.

Keluaran

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

Menambahkan Kunci dan Nilai ke Peta

Dengan menggunakan fungsi map.merge(), Anda dapat menambahkan kunci dan nilai baru ke peta yang sudah 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}
  • Kode ini menambahkan kunci danger ke peta SASS yang ada dan mengatur warnanya sebagai warna latar tombol.

Keluaran

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

Menambahkan Beberapa Kunci dan Nilai ke Peta

Dengan fungsi map.merge(), Anda dapat menambahkan beberapa kunci dan nilai baru ke peta yang sudah ada sekaligus.

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}
  • Kode ini menambahkan beberapa kunci dan nilai secara bersamaan ke peta SASS yang ada.

Memeriksa Kunci dalam Peta

Fungsi map.has-key() memungkinkan Anda memeriksa apakah suatu kunci tertentu ada 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

Mengambil Semua Kunci atau Nilai dari Peta

Mengambil semua kunci

Dengan menggunakan fungsi map.keys(), Anda dapat mengambil semua kunci.

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

Mengambil semua nilai

Dengan menggunakan fungsi map.values(), Anda dapat mengambil 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 Perulangan pada Peta

Di SASS, Anda dapat menggunakan direktif @each untuk melakukan perulangan pada 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}
  • Kode ini melakukan perulangan untuk setiap kunci dan nilai dalam peta SASS dan secara otomatis menghasilkan kelas untuk setiap warna.

Keluaran

 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}

Menangani Peta Bersarang

Peta juga dapat memiliki struktur bersarang. Dalam kasus ini, gunakan fungsi map.get() yang 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}
  • Kode ini mengambil warna latar dan teks untuk tema light dari peta SASS bersarang dan menerapkannya ke elemen body.

Keluaran

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

Contoh Penggunaan Peta: Desain Responsif

Dengan menggunakan peta, Anda dapat dengan mudah mengelola media query dan desain responsif.

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}
  • Kode ini menggunakan peta SASS untuk secara otomatis menghasilkan kelas kontainer responsif untuk setiap breakpoint.

Keluaran

 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 kuat untuk mengatur stylesheet Anda, meningkatkan fleksibilitas dan kegunaan ulang. Peta SASS dapat digunakan dalam berbagai skenario, seperti pengelolaan nilai, perulangan, dan penerapan desain responsif.

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

YouTube Video