Nous voulons obtenir une feuille de style décrivant un arrière plan pour chaque couleur, ainsi que pour la ligne de titre.
Voici le résultat à obtenir:
/*loop through colors*/
.material.pink {
border-left-color:#EA4879;
border-right-color:#EA4879;
}
.material.pink .title {
background-color:#EA4879;
}
.material.green {
border-left-color:#64C532;
border-right-color:#64C532;
}
.material.green .title {
background-color:#64C532;
}
.material.blue {
border-left-color:#6181CF;
border-right-color:#6181CF;
}
.material.blue {
background-color:#6181CF;
Dans stylus voici ce que cela donnerait:
colors = {
pink: #EA4879
green: #64C532
blue: #6181CF
}
for name, color in colors
.material.{name}
border-left-color:color
border-right-color:color
& .title
background-color: color
Source:
https://stackoverflow.com/questions/27309780/loops-with-variables-in-stylus