Question

我有一个像这样的无序列表

<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>

并尝试通过执行以下操作为每个li元素添加不同的背景图像：

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

   }
}

但是这样做的结果就像 url（“../ bilder / keyvisual_”3“.png”）no-repeat

这显然是不正确的，因为我也尝试写这样的网址：

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

但这根本不起作用。

您可能已经看过，我希望bilder/keyvisual_1.png成为第二个li的第一个bilder/keyvisual_2.png和li的背景，依此类推...... < / p>

我想可能有一个使用帮助变量前端的解决方案，但我也没有找到解决方案。

感谢您的帮助！

Answer 1

你的Sass代码应该是：

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

在this fiddle

中查看

注意：在小提琴中我添加了&:after { content:'#{$i}'; }以使呈现的i可见

如何通过scss为每个li添加不同的bg-image？

1 个答案: