Articles
Introduzione a SASS/SCSS
Iterazione in SASS

Iterazione in SASS

Questo articolo spiega come gestire l’iterazione in SASS.

Spiegheremo come eseguire l’iterazione in SASS passo dopo passo, utilizzando esempi di codice reali.

YouTube Video

Iterazione in SASS

L’iterazione in SASS aiuta ad evitare la duplicazione del codice e permette di creare stili flessibili e riutilizzabili.

Motivi per usare l’iterazione in SASS

Ci sono diversi vantaggi nell’utilizzare l’iterazione, come i seguenti:.

  • Migliora la riusabilità del codice, rendendo facile generare stili con pattern simili.
  • La manutenibilità viene migliorata, rendendo più facile modificare gli stili tutti insieme.
  • Aiuta anche a ridurre gli errori.

Ad esempio, puoi generare stili per pulsanti con diversi colori o componenti con varie dimensioni tutto in una volta.

Sintassi utilizzata per l’iterazione in SASS

La principale sintassi usata per l’iterazione in SASS è la seguente:.

  • Usando @for, puoi eseguire iterazioni su un intervallo numerico specificato.
  • Usando @each, puoi ciclare su liste o mappe nell’iterazione.
  • Usando @while, puoi ciclare fino a quando non viene soddisfatta una certa condizione.

Iterazione usando @for

@for esegue un processo ripetitivo su un intervallo di numeri specificato.

Sintassi 

1/*
2@for $i from <start> to <end> {
3  ...
4}
5
6@for $i from <start> through <end> {
7  ...
8}
9*/
  • Specifica i valori di inizio e fine per <start> e <end>. Usando to si esclude il valore finale, mentre con through lo si include.

Esempio

Il codice seguente genera automaticamente classi con un bordo che aumenta di 1px ogni volta.

1@for $i from 1 through 5 {
2  .border-#{$i} {
3    border-width: #{$i}px;
4  }
5}
  • Questo codice genera automaticamente classi per spessori del bordo che aumentano di 1px ciascuno. La direttiva @for qui viene utilizzata per ciclare da 1 a 5.

CSS generato 

 1.border-1 {
 2  border-width: 1px;
 3}
 4.border-2 {
 5  border-width: 2px;
 6}
 7.border-3 {
 8  border-width: 3px;
 9}
10.border-4 {
11  border-width: 4px;
12}
13.border-5 {
14  border-width: 5px;
15}
  • Le classi da .border-1 a .border-5 saranno generate in sequenza, con uno spessore del bordo che aumenta di 1px ciascuna.

Iterazione usando @each

@each esegue cicli usando liste o mappe. È utile quando si vogliono generare in modo efficiente classi con pattern ripetuti.

Sintassi 

1/*
2@each $item in <list> {
3  ...
4}
5*/

Esempio 1: Uso di una lista

Il codice seguente genera più classi per colore del testo.

1@each $color in ("red", "blue", "green") {
2  .text-#{$color} {
3    color: #{$color};
4  }
5}
  • Questo codice genera automaticamente classi di colore del testo per ogni colore presente nella lista. La direttiva @each viene usata per elaborare ogni valore della lista in sequenza.

CSS generato 

1.text-red {
2  color: red;
3}
4.text-blue {
5  color: blue;
6}
7.text-green {
8  color: green;
9}
  • Quando il file SASS viene compilato in CSS, vengono generate classi come .text-red, .text-blue e .text-green per ogni colore della lista.

Esempio 2: Uso di una mappa

Usare una mappa permette di gestire coppie di chiavi e valori. Nel seguente esempio, i colori di sfondo dei pulsanti sono definiti usando una mappa.

 1$colors: (
 2  primary: #3498db,
 3  success: #2ecc71,
 4  danger: #e74c3c
 5);
 6
 7@each $name, $hex in $colors {
 8  .bg-#{$name} {
 9    background-color: #{$hex};
10  }
11}

CSS generato 

1.bg-primary {
2  background-color: #3498db;
3}
4.bg-success {
5  background-color: #2ecc71;
6}
7.bg-danger {
8  background-color: #e74c3c;
9}
  • Quando il file SASS viene compilato in CSS, vengono generate classi come .bg-primary, .bg-success e .bg-danger per ogni chiave nella mappa.

Iterazione usando @while

@while continua il ciclo fintanto che la condizione è vera.

Sintassi 

1/*
2@while <condition> {
3  ...
4}
5*/

Esempio

Ad esempio, se vuoi aumentare la dimensione del font passo dopo passo, puoi scriverlo così:.

1$i: 1;
2
3@while $i <= 5 {
4  .font-#{$i} {
5    font-size: #{$i}rem;
6  }
7  $i: $i + 1;
8}
  • Puoi usare la direttiva @while per elaborazioni iterative quando aumenti la dimensione del font a passi. Utilizzando la variabile $i, le classi vengono generate automaticamente per valori da 1 a 5.

CSS generato 

 1.font-1 {
 2  font-size: 1rem;
 3}
 4.font-2 {
 5  font-size: 2rem;
 6}
 7.font-3 {
 8  font-size: 3rem;
 9}
10.font-4 {
11  font-size: 4rem;
12}
13.font-5 {
14  font-size: 5rem;
15}
  • Quando il file SASS viene compilato in CSS, vengono generate automaticamente classi con grandezza del font da 1rem a 5rem.

Esempio avanzato: combinare iterazione e annidamento

Combinare l’iterazione con la funzione di annidamento di SASS permette di generare stili ancora più avanzati.

Esempio

Di seguito un esempio in cui vengono definiti insieme colore di sfondo e colore hover dei pulsanti.

 1@use "sass:color";
 2
 3$colors: (
 4  primary: #3498db,
 5  success: #2ecc71,
 6  danger: #e74c3c
 7);
 8
 9@each $name, $hex in $colors {
10  .btn-#{$name} {
11    background-color: $hex;
12    color: white;
13
14    &:hover {
15      background-color: color.scale($hex, $lightness: -10%);
16    }
17  }
18}
  • Combinando l'iterazione e il nesting in SASS, puoi generare i colori di sfondo e i colori hover dei pulsanti tutto in una volta sola. Per ogni colore nella mappa, viene creata una classe .btn- e lo stile :hover viene definito utilizzando il nesting.

CSS generato 

 1.btn-primary {
 2  background-color: #3498db;
 3  color: white;
 4}
 5.btn-primary:hover {
 6  background-color: #2980b9;
 7}
 8.btn-success {
 9  background-color: #2ecc71;
10  color: white;
11}
12.btn-success:hover {
13  background-color: #27ae60;
14}
15.btn-danger {
16  background-color: #e74c3c;
17  color: white;
18}
19.btn-danger:hover {
20  background-color: #c0392b;
21}
  • Quando converti il file SASS in CSS, il colore di sfondo e il colore al passaggio del mouse per ciascun pulsante vengono generati automaticamente e gli stili :hover vengono definiti collettivamente utilizzando l'annidamento.

Punti da considerare quando si usa l’iterazione

Tieni a mente i seguenti punti quando usi l’iterazione per scrivere codice più efficiente e leggibile.

  1. Evita un annidamento troppo profondo Un annidamento eccessivo riduce la leggibilità, quindi mantienilo al minimo necessario.

  2. Considera l’impatto sulle prestazioni Se vengono generate troppe classi tramite l’iterazione, il tuo CSS potrebbe diventare inutilmente grande.

  3. Usa nomi di variabile appropriati Per variabili come $i o $item, usa nomi significativi per rendere il codice più comprensibile.

Riepilogo

Utilizzare l’iterazione in SASS permette di creare stili efficienti e facilmente manutenibili. In particolare, scegliere tra @for, @each e @while ti permette di generare CSS dinamico e flessibile.

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

YouTube Video

La funzione `if` in SASS