Boucle SCSS : itérer sur un tableau de noms de fichiers dynamiquement

Question

Donc il faut connaître à l'avance le nom de tous les fichiers ? Et si on en a 400, on tape les 400 noms à traiter dans la boucle ?
Il n'est pas possible d'alimenter un tableau et ensuite dans la boucle each on indique le tableau ciblé après le in comme dans JS ?
Un truc du genre :
$classIcon = nom1, nom2, nom3, nom4;
@for each $name in $classIcon {
.#{$name}-icon {
background: url('../../images/icons/#{$name}.png')
}
}
J'imagine que non dans la mesure où SASS n'est qu'un préprocesseur.

Louis-Nicolas Leuillet · Accepted Answer

SASS permet de créer des listes (l'équivalent des tableaux) et de les parcourir avec @each .
Ta syntaxe est presque bonne, il y a juste quelques ajustements :
$classIcons: nom1, nom2, nom3, nom4;
@each $name in $classIcons {
.#{$name}-icon {
background: url('../../images/icons/#{$name}.png');
}
}
Du coup si tu as 400 icônes,tu listes tes 400 noms dans la variable $classIcons et la boucle fait le reste.

Boucle SCSS : itérer sur un tableau de noms de fichiers dynamiquement

Codez dans vos feuilles de style grâce à SASS et SCSS