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

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

这显然是不正确的，因为我也试过这样写 url：

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

但这根本不起作用。

所以你可能已经看到了，我想让bilder/keyvisual_1.png成为第一个li的背景，bilder/keyvisual_2.png成为第二个li的背景，依此类推。 .

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

感谢您的帮助！

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

中查看

注意：在 fiddle 中，我添加了一个 &:after { content:'#{$i}'; } 以使呈现的 i 可见

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

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

sass