Mappe in SASS

Questo articolo spiega le mappe in SASS.

Spiegheremo le basi e l'uso avanzato delle mappe in SASS, fornendo esempi pratici.

YouTube Video

Mappe in SASS

Che cos'è una mappa in SASS?

Una mappa in SASS è una struttura dati che contiene coppie chiave-valore, simile agli oggetti in JavaScript o ai dizionari in Python. Usando le mappe in SASS, puoi gestire stili complessi in modo conciso e migliorare la manutenibilità.

Sintassi di base delle mappe

Le mappe in SASS sono definite usando () (parentesi). La sintassi è la seguente:.

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

Ad esempio, per creare una mappa per gestire i temi dei colori, puoi definirla come segue:.

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

Ottenere valori da una mappa

In SASS si usa la funzione map.get() per recuperare un valore da una mappa.

Esempio d'uso:

 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}

• Questo codice prende il valore del colore primary dalla mappa $colors e lo applica come colore di sfondo del pulsante.

Impostare chiavi e valori in una mappa

Utilizzando la funzione map.set(), puoi assegnare un nuovo valore a una chiave specifica. Se la chiave esiste già, il suo valore verrà sovrascritto.

Esempio di utilizzo

 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}

• Questo codice aggiunge una chiave danger alla mappa e imposta il suo valore come colore di sfondo del pulsante.

Output

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

Rimuovere chiavi da una mappa

Utilizzando la funzione map.remove(), puoi rimuovere una specifica chiave e il suo valore da una mappa.

Esempio di utilizzo

 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}

• Questo codice rimuove la chiave danger dalla mappa, quindi il colore di sfondo di button-danger sarà null.

Output

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

Aggiungere chiavi e valori a una mappa

Utilizzando la funzione map.merge(), puoi aggiungere nuove chiavi e valori a una mappa esistente.

Esempio di utilizzo

 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}

• Questo codice aggiunge una chiave danger a una mappa SASS esistente e imposta il suo colore come colore di sfondo del pulsante.

Output

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

Aggiungere più chiavi e valori a una mappa

Con la funzione map.merge() puoi aggiungere più nuove chiavi e valori a una mappa esistente contemporaneamente.

Esempio di utilizzo

 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}

• Questo codice aggiunge più chiavi e valori contemporaneamente a una mappa SASS esistente.

Controllare la presenza di chiavi in una mappa

La funzione map.has-key() ti permette di verificare se una specifica chiave esiste in una mappa.

Esempio di utilizzo

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

Ottenere tutte le chiavi o i valori da una mappa

Ottenere tutte le chiavi

Utilizzando la funzione map.keys(), puoi recuperare tutte le chiavi.

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

Ottenere tutti i valori

Utilizzando la funzione map.values(), puoi recuperare tutti i valori.

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

Iterare su una mappa

In SASS puoi usare la direttiva @each per iterare su una mappa.

Esempio di utilizzo

 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}

• Questo codice itera su ogni chiave e valore di una mappa SASS e genera automaticamente una classe per ogni colore.

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}

Gestire mappe annidate

Le mappe possono anche avere una struttura annidata. In questo caso, utilizza funzioni map.get() annidate.

Esempio di utilizzo

 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}

• Questo codice ottiene i colori di sfondo e del testo per il tema light da una mappa SASS annidata e li applica al body.

Output

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

Esempio di utilizzo delle mappe: Responsive Design

Utilizzando le mappe, puoi gestire facilmente le media query e il responsive design.

Esempio di utilizzo

 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}

• Questo codice utilizza una mappa SASS per generare automaticamente classi container responsive per ogni 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}

Conclusione

Le mappe SASS sono uno strumento potente per organizzare il tuo foglio di stile, aumentando flessibilità e riutilizzabilità. Possono essere utilizzate in molti scenari, come la gestione dei valori, i cicli e l'implementazione del responsive design.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video