Boucle dans Stylus

Posté le par

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*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:

1
2
3
4
5
6
7
8
9
10
11
12
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

Partagez: