Mga Map sa SASS

Ipinaliliwanag ng artikulong ito ang mga map sa SASS.

Ipapaliwanag namin ang mga batayan hanggang advanced na paggamit ng SASS maps, at magbibigay ng mga praktikal na halimbawa.

YouTube Video

Mga Map sa SASS

Ano ang Map sa SASS?

Ang map sa SASS ay isang uri ng istruktura ng datos na naglalaman ng mga pares ng key at value, na katulad ng mga object sa JavaScript o dictionary sa Python. Sa pamamagitan ng paggamit ng mga map sa SASS, maaari mong pamahalaan ang mga masalimuot na estilo nang mas maikli at mapadali ang maintenance.

Pangunahing Sintaks ng Maps

Ang mga map sa SASS ay tinutukoy gamit ang () (parentheses). Ang syntax ay tulad ng sumusunod:.

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

Halimbawa, upang gumawa ng map para sa pag-manage ng mga color theme, maaari mo itong itakda tulad ng nasa ibaba:.

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

Pagkuha ng mga Value mula sa isang Map

Sa SASS, ginagamit mo ang map.get() function para kunin ang value mula sa isang map.

Halimbawa ng paggamit:

 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}

• Kinukuha ng code na ito ang primary na kulay mula sa $colors map at ginagamit ito bilang background color ng button.

Pagbibigay ng Key at Value sa isang Map

Sa paggamit ng map.set() function, maaari kang magtalaga ng bagong value sa isang tinukoy na key. Kung ang key ay umiiral na, mapapalitan ang value nito.

Halimbawa ng Paggamit

 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}

• Dinadagdag ng code na ito ang danger na key sa map at itinatakda ito bilang background color ng button.

Output

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

Pag-alis ng Key mula sa Map

Sa paggamit ng map.remove() function, maaari mong alisin ang isang partikular na key at ang value nito mula sa map.

Halimbawa ng Paggamit

 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}

• Inaalis ng code na ito ang danger na key mula sa map, kaya ang background color ng button-danger ay magiging null.

Output

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

Pagdagdag ng Key at Value sa Map

Sa paggamit ng map.merge() function, maaari kang magdagdag ng bagong key at value sa kasalukuyang map.

Halimbawa ng Paggamit

 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}

• Dinadagdag ng code na ito ang danger na key sa existing na SASS map at itinatalaga ang kulay nito bilang background ng button.

Output

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

Pagdagdag ng Maramihang Key at Value sa Map

Sa pamamagitan ng map.merge() function, maaari kang magdagdag ng maramihang bagong key at value sa isang map nang sabay-sabay.

Halimbawa ng Paggamit

 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}

• Dinadagdag ng code na ito ang maraming key at value nang sabay-sabay sa isang kasalukuyang SASS map.

Pag-check kung mayroon ng Key sa Map

Pinapayagan ka ng map.has-key() function na tingnan kung may partikular na key ang map.

Halimbawa ng Paggamit

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

Pagkuha ng Lahat ng Mga Key o Value mula sa isang Map

Pagkuha ng lahat ng key

Sa paggamit ng map.keys() function, makukuha mo ang lahat ng key.

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

Pagkuha ng lahat ng value

Sa paggamit ng map.values() function, makukuha mo ang lahat ng value.

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

Pag-loop sa isang Map

Sa SASS, maaari mong gamitin ang @each directive para mag-loop sa isang map.

Halimbawa ng Paggamit

 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}

• Ang code na ito ay umiikot sa bawat key at value ng SASS map at awtomatikong gumagawa ng klase para sa bawat kulay.

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}

Pag-handle ng Nested na Map

Maaaring magkaroon ng nested na istruktura ang mga map. Sa kasong ito, gumamit ng nested na map.get() functions.

Halimbawa ng Paggamit

 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}

• Kinukuha ng code na ito ang background at text color para sa light theme mula sa nested SASS map at inilalagay ang mga ito sa body.

Output

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

Halimbawa ng Paggamit ng Map: Responsive Design

Sa paggamit ng mga map, madali mong mapamahalaan ang mga media query at responsive design.

Halimbawa ng Paggamit

 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}

• Ang code na ito ay gumagamit ng SASS map upang awtomatikong lumikha ng mga responsive container class para sa bawat 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}

Konklusyon

Ang SASS maps ay isang malakas na kasangkapan para sa pag-oorganisa ng iyong stylesheet, nagpapataas ng flexibility at reusability. Maaari silang gamitin sa maraming sitwasyon, gaya ng value management, looping, at paggawa ng responsive design.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video