Jak naśladować sass dla pętli w nieruchomości? [duplicate] - pętle, sass

Mam kilka bardzo powtarzalnych css, które chciałbymdla sass, aby uprościć. Zasadniczo mam szereg elementów, które mają paski tła w zależności od ich poziomu. Używam gradientów tła do tworzenia tych pasków. Próbowałem użyć pętli for wewnątrz mojej właściwości background-image, ale najwyraźniej jest to niedopuszczalne. Jest to bardzo uproszczony przykład tego, co próbuję zrobić.

Jakieś pomysły, jak mogę obejść to ograniczenie pętli?

.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);
}
}
}

Pożądany rezultat:

.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);
}

Odpowiedzi:

Wypróbuj to podejście

.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);
}
}
}

Możesz go przetestować sassmeister