Plutôt que d'écrire à la main plusieurs classes CSS similaires avec une légère variation, SCSS permet de créer des boucles générant pour nous ces différentes classes.
@for
Les boucles @for fonctionnent de façon très similaire aux boucles for en JavaScript. Il faut premièrement définir une variable, lui donner une valeur de départ et une valeur à atteindre.
Par exemple, afin de configurer la taille de plusieurs titres (headings) à l'aide d'une boucle @for, il est possible de faire:
@for $index from 1 to 5 {
h#{$index} {
font-size: 40px - ($index * 5);
}
}
Ce qui produit le code suivant:
h1 { font-size: 35px; }
h2 { font-size: 30px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
Remarquez comment, pour concaténer une variable SCSS avec du texte (c-à-d construire le nom du sélecteur css, de la classe ou de la pseudo-classe), on l’enveloppe avec #{}.
Un peu comme les ${} avec les littéraux de gabarit en Javascript.
Remarquez que le dernier chiffre n’est jamais atteint. La boucle indique 1 to 5. En conséquence, le dernier heading est h4 et non h5 puisqu'on n'atteind jamais le chiffre mentionné après le to dans la ligne @for $index from 1 to 5.
through
Lorsque through est utilisé à la place de to, le chiffre à atteindre dans la boucle est inclus.
Par exemple, le même code que précédemment, mais avec through:
@for $index from 1 through 5 {
h#{$index} {
font-size: 40px - ($index * 5);
}
}
Produit le code suivant:
h1 { font-size: 35px; }
h2 { font-size: 30px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 15px; }
Où le nombre 5 est inclus.
@for
EXERCICE
Images 1 à 6
Utiliser @for du langage Sass pour afficher les images thématiques 1 à 6.
EXERCICE
Palette Pink Paradise
Utiliser @for du langage Sass pour recréer la palette de couleur Pink Paradise.
@each
Les boucles @each ressemblent aux boucles @for à la différence qu'elles servent à itérer sur une liste d'items. À tour de rôle, une variable prend la valeur de chaque item dans la liste et devient accessible.
Par exemple, une de boucle configurant la couleur de plusieurs messages peut être écrite ainsi avec une boucle
@each:
$colorsArr: red, yellow, blue, gray;
@each $color in $colorsArr {
.msg-#{$color} {
background-color: $color;
}
}
Ce qui produit, une fois le code compilé en css, le code suivant:
.msg-red { background-color: red; }
.msg-yellow { background-color: yellow; }
.msg-blue { background-color: blue; }
.msg-gray { background-color: gray; }
Map (utilisation de clé et valeur)
Dans certains cas, identifier une valeur à l'aide d'une clé dans une boucle peut s'avérer très pratique. Heureusement, la boucle @each peut aussi itérer sur un tableau de clés et de valeurs.
Par exemple, pour créer une rapidement des classes ayant des noms textuels et des valeurs numériques il est possible de faire:
$sizesArr: (small: 12px, medium: 16px, big: 30px);
@each $key, $value in $sizesArr {
.text-#{$key} {
font-size: $value;
}
}
Ce qui produit, une fois le code compilé en css, le code suivant:
.text-small { font-size: 12px; }
.text-medium { font-size: 16px; }
.text-big { font-size: 30px; }
@each
EXERCICE
Menu Overwatch
Utiliser @each du langage Sass pour recréer un menu permettant de choisir parmi certains personnages du jeu Overwatch.
Boucle SASS