CODEWITHSUNDEEP
sass
Daiaiai
Daiaiai

Reputation: 1089

How to add a different bg-image to each li by scss?

I have an unordered list like that 

<div id="target_familie" class="votes rb3">
 <ul>
  <li><h2>Something else in here</h2></li>
  <li><h3>Background 1 here</li>
  <li><h3>Background 2 here</li>
  <li><h3>Background 3 here</li>
 </ul>
</div>

and trying to add a different background image to each of these li-elements by doing this:

@for $i from 1 through 4 {
    .votes li:nth-of-type(#{$i})
    {
    background: url('../bilder/keyvisual_'$i'.png') no-repeat;

   }
}

But that just made a result like url("../bilder/keyvisual_" 3 ".png") no-repeat

And that's obviously not correct due to the I also tried to write the url like that:

background: url('../bilder/keyvisual_#{$i}.png') no-repeat;

but that didn't work at all.

So you may already have seen, I want bilder/keyvisual_1.png to be the background of the first li and bilder/keyvisual_2.png of the second li and so on...

I guess there could be a solution with using a helping variable upfrontal, but I didn't come to a solution by that neither.

Thanks for your help!

Upvotes: 0

Views: 197

Answers (1)

Matyas
Matyas

Reputation: 13702

Your Sass code should be like:

@for $i from 1 through 4 {
    .votes li:nth-of-type(#{$i}) {
        background: url('../bilder/keyvisual_#{$i}.png') no-repeat;
    }
}

Check it out in this fiddle

Note: In the fiddle I added an &:after { content:'#{$i}'; } to make the rendered i visible

Upvotes: 1

Related Questions