Comment imiter un sass for loop dans une propriété? [dupliquer] - boucles, sass

J'ai des CSS très répétitifs que j'aimeraispour sass simplifier. J'ai essentiellement une série d'éléments qui ont un nombre de bandes d'arrière-plan en fonction de leur niveau. J'utilise des dégradés de fond pour créer ces bandes. J'ai essayé d'utiliser une boucle for à l'intérieur de ma propriété background-image, mais apparemment ce n'est pas acceptable. Ceci est un exemple très simpliste de ce que je tente de faire.

Des idées sur la façon dont je peux contourner cela pour la limitation de boucle?

.master {
@for $i from 1 through 10 {

.item-#{$i} {
background-image:
@for $j from 1 through $1 {
linear-gradient(90deg, red 7px, #fff 1px),
}
linear-gradient(#fff 1px, rgba(255, 255, 255,.0) 1px);
}
}
}

Résultat désiré:

.master .item-1 {
background-image:
linear-gradient(90deg, red 7px, #fff 1px),
linear-gradient(#fff 1px, rgba(255, 255, 255,.0) 1px);
}

.master .item-2 {
background-image:
linear-gradient(90deg, red 7px, #fff 1px),
linear-gradient(90deg, red 7px, #fff 1px),
linear-gradient(#fff 1px, rgba(255, 255, 255,.0) 1px);
}

.master .item-3 {
background-image:
linear-gradient(90deg, red 7px, #fff 1px),
linear-gradient(90deg, red 7px, #fff 1px),
linear-gradient(90deg, red 7px, #fff 1px),
linear-gradient(#fff 1px, rgba(255, 255, 255,.0) 1px);
}

etc...

.master .item-10 {
background-image:
linear-gradient(90deg, red 7px, #fff 1px),
linear-gradient(90deg, red 7px, #fff 1px),
linear-gradient(90deg, red 7px, #fff 1px),
linear-gradient(90deg, red 7px, #fff 1px),
linear-gradient(90deg, red 7px, #fff 1px),
linear-gradient(90deg, red 7px, #fff 1px),
linear-gradient(90deg, red 7px, #fff 1px),
linear-gradient(90deg, red 7px, #fff 1px),
linear-gradient(90deg, red 7px, #fff 1px),
linear-gradient(90deg, red 7px, #fff 1px),
linear-gradient(#fff 1px, rgba(255, 255, 255,.0) 1px);
}

Réponses:

Essayez cette approche

.master {
@for $i from 1 through 10 {

$lg : "";
@for $j from 1 through $i {
$lg : $lg + "linear-gradient(90deg, red 7px, #fff 1px), ";
}

.item-#{$i} {
background-image: #{$lg}linear-gradient(#fff 1px, rgba(255,255,255,.0) 1px);
}
}
}

Vous pouvez le tester sur sassmeister