Articles
Introduzione a SASS/SCSS
Liste in SASS

Liste in SASS

Questo articolo spiega le liste in SASS.

Copriamo le basi e gli usi avanzati delle liste in SASS e forniamo esempi pratici.

YouTube Video

Liste in SASS

SASS offre utili funzionalità simili alla programmazione come estensione di CSS. Tra queste, le liste sono una funzionalità molto utile per definire gli stili in modo dinamico.

Che cos’è una lista in SASS?

Una lista in SASS è una raccolta di valori separati da virgole (,) o spazi. Sono usate quando si passano più valori alle proprietà CSS o si fanno iterazioni.

1// Comma-separated list
2$comma-list: 1px, 2px, 3px;
3
4// Space-separated list
5$space-list: bold italic 16px Arial;

Le principali caratteristiche delle liste includono i seguenti punti:.

  • Una lista può contenere valori di qualsiasi tipo di dato, come numeri, stringhe o colori.
  • Puoi scegliere tra liste separate da virgole o da spazi, a seconda dei casi d’uso.

Esempio di base di definizione di stile usando le liste

Di seguito un esempio per generare dinamicamente stili di bordo semplici usando le liste.

 1@use "sass:list";
 2
 3$border-widths: 1px, 2px, 3px;
 4
 5.border-example {
 6  @for $i from 1 through list.length($border-widths) {
 7    &-#{list.nth($border-widths, $i)} {
 8      border-width: list.nth($border-widths, $i);
 9    }
10  }
11}

Risultato della compilazione 

 1.border-example-1px {
 2  border-width: 1px;
 3}
 4
 5.border-example-2px {
 6  border-width: 2px;
 7}
 8
 9.border-example-3px {
10  border-width: 3px;
11}
  • Con la funzione nth() del modulo sass:list, puoi recuperare un valore specifico da una lista.

Manipolazione delle liste

Il modulo sass:list fornisce funzioni per manipolare le liste, rendendo facile recuperare e aggiungere elementi..

Recuperare un elemento: nth()

nth() è una funzione che recupera un elemento da una lista.

1@use "sass:list";
2
3$colors: red, green, blue;
4$first-color: list.nth($colors, 1); // red
  • In questo codice, la funzione nth() viene usata per ottenere il valore all’indice specificato.

Controlla l’indice: index()

index() è una funzione che restituisce la posizione di un elemento in una lista.

1@use "sass:list";
2
3$colors: red, green, blue;
4$position: list.index($colors, blue); // 3
  • In questo codice, index() viene utilizzato per ottenere che l’elemento blue sia il terzo elemento della lista.

Ottenere la lunghezza della lista: length()

length() è una funzione che restituisce la lunghezza di una lista.

1@use "sass:list";
2
3$fonts: Arial, Helvetica, sans-serif;
4$count: list.length($fonts); // 3
  • In questo codice, la funzione length() viene usata per ottenere il numero di valori presenti nella lista.

Aggiungere un elemento: append()

append() è una funzione usata per aggiungere elementi a una lista.

1@use "sass:list";
2
3$shapes: circle, square;
4$shapes: list.append($shapes, triangle); // circle, square, triangle
  • In questo codice, la funzione append() viene usata per aggiungere un valore alla lista.

Sostituire un elemento: set-nth()

set-nth() è una funzione che sostituisce l’elemento in una posizione specifica con un altro valore.

1@use "sass:list";
2
3$colors: red, green, blue;
4$updated: list.set-nth($colors, 2, yellow); // red, yellow, blue
  • In questo codice, set-nth() viene utilizzato per sostituire il secondo elemento con yellow.

Unire liste: join()

join() è una funzione che unisce due liste.

1@use "sass:list";
2
3$list1: a, b;
4$list2: c, d;
5$combined: list.join($list1, $list2); // a, b, c, d
  • In questo codice, join() viene utilizzato per unire due liste in una sola.

Accoppiare liste: zip()

zip() è una funzione che raggruppa molteplici liste elemento per elemento.

1@use "sass:list";
2
3$names: alice, bob;
4$ages: 20, 30;
5$zipped: list.zip($names, $ages); // (alice 20, bob 30)
  • In questo codice, zip() viene utilizzato per combinare nomi ed età come coppie.

Liste annidate

Le liste possono anche essere annidate, permettendo di usarle come array bidimensionali.

1@use "sass:list";
2
3$nested-list: (red, green), (blue, yellow);
4
5// Accessing elements of a nested list
6$first-sublist: list.nth($nested-list, 1); // (red, green)
7$first-color: list.nth(list.nth($nested-list, 1), 1); // red
  • Gestendo strutture di dati così complesse, diventa possibile generare stili avanzati.

Esempio pratico: generare gradienti

Ecco un esempio di generazione efficiente di gradienti usando le liste.

 1@use "sass:list";
 2@use "sass:math";
 3
 4$colors: red, orange, yellow, green, blue;
 5
 6@function gradient($colors) {
 7  $gradient: ();
 8  $len: list.length($colors);
 9
10  @for $i from 1 through $len {
11    // build "color percent%" string with interpolation
12    $item: "#{list.nth($colors, $i)} #{math.div(100%, $len) * $i}";
13    $gradient: list.append($gradient, $item);
14  }
15
16  @return $gradient;
17}
18
19.background {
20  background: linear-gradient(to right, #{list.join(gradient($colors), ', ')});
21}

Risultato della compilazione 

1.background {
2	background: linear-gradient(to right, red 20%, orange 40%, yellow 60%, green 80%, blue 100%);
3}

  • Questo codice è un esempio di generazione automatica di gradienti usando le liste in SCSS.

    • I colori usati per il gradiente sono definiti nella lista $colors.
    • Nella funzione gradient(), una posizione viene calcolata e assegnata equamente a ogni colore in base al numero totale, creando una lista per il gradiente.
    • Nella classe .background, viene usato linear-gradient per combinare la lista di colori generata e applicare un gradiente orizzontale.

  • Poiché le posizioni vengono calcolate automaticamente in base alla lunghezza della lista di colori, puoi creare facilmente un gradiente uniforme aggiungendo o cambiando colori.

Avvertenze e buone pratiche

I seguenti punti possono essere considerati quando si usano le liste:.

  • Tipo di separatore delle liste Le liste separate da virgola e quelle separate da spazio sono trattate diversamente, quindi bisogna scegliere il tipo più appropriato secondo la situazione.

  • Dimensione della lista Quando si manipolano le liste in modo dinamico, è sicuro controllarne la dimensione usando la funzione length().

  • Gestione delle liste annidate Quando si gestiscono liste annidate, una gestione attenta degli indici aiuta ad evitare errori.

Conclusione

Le liste in SASS sono uno strumento potente per definire gli stili in modo dinamico e gestire efficientemente design complessi.

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

YouTube Video

Stringhe in SASSMappe in SASS