Maps in SASS

Dit artikel legt maps in SASS uit.

We zullen de basis tot het geavanceerd gebruik van SASS maps uitleggen en praktische voorbeelden geven.

YouTube Video

Maps in SASS

Wat is een map in SASS?

Een map in SASS is een datastructuur die sleutel-waardeparen bevat, vergelijkbaar met objecten in JavaScript of woordenboeken in Python. Door maps in SASS te gebruiken, kun je complexe stijlen overzichtelijk beheren en de onderhoudbaarheid verbeteren.

Basis syntaxis van maps

Maps in SASS worden gedefinieerd met behulp van () (haakjes). De syntaxis is als volgt:.

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

Om bijvoorbeeld een map aan te maken voor het beheren van kleurthema's, kun je die als volgt definiëren:.

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

Waarden ophalen uit een map

In SASS gebruik je de map.get() functie om een waarde uit een map te halen.

Voorbeeld van gebruik:

 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}

Uitvoer:

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

• Deze code haalt de primary kleurwaarde uit de $colors map en past deze toe op de achtergrondkleur van de knop.

Sleutels en waarden instellen in een map

Met behulp van de map.set() functie kun je een nieuwe waarde toewijzen aan een bepaalde sleutel. Als de sleutel al bestaat, wordt de waarde overschreven.

Voorbeeldgebruik

 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}

• Deze code voegt een danger-sleutel toe aan de map en stelt de waarde in als de achtergrondkleur van de knop.

Uitvoer

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

Sleutels verwijderen uit een map

Met de map.remove() functie kun je een bepaalde sleutel en waarde uit een map verwijderen.

Voorbeeldgebruik

 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}

• Deze code verwijdert de danger-sleutel uit de map, zodat de achtergrondkleur van button-danger null wordt.

Uitvoer

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

Sleutels en waarden toevoegen aan een map

Met de map.merge() functie kun je nieuwe sleutels en waarden aan een bestaande map toevoegen.

Voorbeeldgebruik

 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}

• Deze code voegt een danger-sleutel toe aan een bestaande SASS-map en stelt de kleur in als de achtergrondkleur van de knop.

Uitvoer

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

Meerdere sleutels en waarden toevoegen aan een map

Met de map.merge() functie kun je meerdere nieuwe sleutels en waarden tegelijk aan een bestaande map toevoegen.

Voorbeeldgebruik

 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}

• Deze code voegt meerdere sleutels en waarden tegelijk toe aan een bestaande SASS-map.

Controleren op sleutels in een map

Met de map.has-key() functie kun je controleren of een bepaalde sleutel in een map bestaat.

Voorbeeldgebruik

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

Alle sleutels of waarden uit een map halen

Alle sleutels ophalen

Met de map.keys() functie kun je alle sleutels ophalen.

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

Alle waarden ophalen

Met de map.values() functie kun je alle waarden ophalen.

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

Door een map loopen

In SASS kun je de @each directive gebruiken om door een map te loopen.

Voorbeeldgebruik

 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}

• Deze code loopt door elke sleutel en waarde in een SASS-map en genereert automatisch een klasse voor elke kleur.

Uitvoer

 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}

Omgaan met geneste maps

Maps kunnen ook een geneste structuur hebben. Gebruik in dat geval geneste map.get() functies.

Voorbeeldgebruik

 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}

• Deze code haalt de achtergrond- en tekstkleuren voor het light-thema uit een geneste SASS-map en past ze toe op de body.

Uitvoer

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

Gebruik van maps: Responsive design

Door maps te gebruiken kun je gemakkelijk media queries en responsive design beheren.

Voorbeeldgebruik

 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}

• Deze code gebruikt een SASS-map om automatisch responsive containerklassen voor elk breakpoint te genereren.

Uitvoer

 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}

Conclusie

SASS-maps zijn een krachtig hulpmiddel om je stylesheet te organiseren en de flexibiliteit en herbruikbaarheid te vergroten. Ze kunnen in veel scenario's worden gebruikt, zoals waardebeheer, loops en het implementeren van responsive design.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video