SASS - Les boucles

C'est ici que nous allons voir comment utiliser les boucles en SASS.

Les boucles ont pour seule mission de répéter un bout de code X fois. Pour quoi faire ?
La réponse sera : tout dépend de vos besoins ! Par exemple, vous utiliserez une boucle pour répéter un calcul plusieurs fois d'affilée.

Boucle @for

La boucle @for répètera le code contenu en son sein autant de fois que demandé.

@for $i from 1 through 6 {
    .item-#{$i} {
        width: 10*$i+px;
    }
}

Cette boucle va me créer au total 6 classes CSS, ayant chacune une valeur différente pour width.

Résultat :

.item-1 {  width: 10px;  }
.item-2 {  width: 20px;  }
.item-3 {  width: 30px;  }
.item-4 {  width: 40px;  }
.item-5 {  width: 50px;  }
.item-6 {  width: 60px;  }

Boucle @while

La boucle @while répètera le code contenu en son sein tant que la condition de sortie n'est pas vérifiée. Prenez bien garde à avoir une condition de sortie pour éviter une boucle infinie, et donc un plantage de votre navigateur.

$margin: 0;

@while($margin < 10) {
    $margin: $margin+2;
}

main {
    margin: $margin+px;
}

Dans un premier temps, je déclare une variable avec une valeur de départ, dans mon cas, la variable $margin ayant pour valeur 0. La boucle qui suit reprend la valeur de la variable $margin et lui affecte 2 tant que celle-ci est inférieure à 10.

Boucle @each

La boucle @each permet de parcourir une liste pour créer différentes classes CSS au besoin. Supposons que vous ayez plusieurs images à intégrer en CSS et que vous avez besoin d'autant de classes CSS que d'images.

@each $icon in menu, cart, map, user {
    .#{$icon}-icon {
        background-image: url('../assets/icons/#{$icon}.svg');
    }
}

Résultat :

.menu-icon {
    background-image: url('../assets/icons/menu.svg');
}

.cart-icon {
    background-image: url('../assets/icons/cart.svg');
}

.map-icon {
    background-image: url('../assets/icons/map.svg');
}

.user-icon {
    background-image: url('../assets/icons/user.svg');
}

La liste de nos éléments à parcourir peut être déclarée dans une variable au préalable :

$elements: menu, cart, map, user;

@each $icon in $elements {
    .#{$icon}-icon {
        background-image: url('../assets/icons/#{$icon}.svg');
    }
}