文章/答案/技术大牛

发布

社区首页 >问答首页 >如何通过scss向每个li添加不同的bg图像？

问如何通过scss向每个li添加不同的bg图像？
EN

Stack Overflow用户

提问于 2015-03-11 08:54:26

回答 1查看 169关注 0票数 0

我有这样一个无序的名单

<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")的结果，不重复的

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

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

但那根本不管用。

所以您可能已经看到了，我希望bilder/keyvisual_1.png成为第一个li和第二个li的bilder/keyvisual_2.png的背景，等等……

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

谢谢你的帮忙!

sass

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-03-11 08:58:14

您的Sass代码应该类似于：

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

在这把小提琴中查看它

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28982104

复制

相似问题

问如何通过scss向每个li添加不同的bg图像？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过scss向每个li添加不同的bg图像？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过scss向每个li添加不同的bg图像？
EN