Loop SASS para saída de classes com número único e imagem de fundo
Eu me deparei com uma situação em que um loop SASS seria ótimo. Eu tenho uma carga de<div>
, cada um tem uma classe única que segue o padrão de.band-(number)
, uma versão simplificada do meu HTML ficaria assim ...
<div class="band-1"></div>
<div class="band-2"></div>
<div class="band-3"></div>
etc.
Cada um desses elementos possui um únicobackground-image
, mas a convenção de nomenclatura da imagem segue a dodiv
são eles mesmos. Meu CSS precisa produzir isso ...
.band-1 {
background-image:url('../img/image_01.png');
}
.band-2 {
background-image:url('../img/image_02.png');
}
.band-3 {
background-image:url('../img/image_03.png');
}
Como eu iria produzir isso de maneira concisa? Desde já, obrigado.