I cicli for, each e while in Sass

Iterare in Sass con le strutture dei cicli: for, each e while

Sass consente di utilizzare i cicli in modo da iterare un blocco di istruzioni. Per poter iterare un numero finito di cicli esiste la direttiva @for che genera ripetutamente set di dichiarazioni in base al valore assunto da un contatore. La sintassi per poter utilizzare la direttiva utilizza due variabili per il valore di partenza e quello di arrivo:

    @for $i from <inizio> to <fine>

Se il valore di <start> risulta maggiore di <end>, il contatore decresce. Se si volesse includere nel ciclo il valore di <fine>, è possibile utilizzare la clausola to:

    @for $i from <start> through <fine>

Il ciclo each per iterare le collezioni

La direttiva @each consente di iterare gli elementi di una lista o di una mappa. La sua sintassi è:

    @each $i in

Ad ogni iterazione, la variabile $elem conterrà un elemento della collezione.

Ecco un esempio di ciclo each:

    @each $icon in home, contact, links, about, blog {
        .#{$icon}-icon {
            padding-left: 16px;
            background-image: url(icons/#{$icon}.png) center left no-repeat;
        }
    }

Il ciclo while in Sass

La direttiva @while accetta un’espressione SassScript e ripete un ciclo finché l’espressione non diventa falsa. Un esempio di ciclo while è il seguente:

    $i: 5;
    @while $i < 0 {
        h#{6 - $i} { font-size: ($i * 0.50)em; }
        $i: $i - 1;
    }

Ad ogni iterazione verrà imposta la dimensione del font per i vari tag header.

Ecco l’elenco delle lezioni su Sass:

Pubblicato in CSS, Front-end, JavaScript, Programmazione, Sass, Senza categoria Taggato con: , , , , , ,

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*