Question

我是SCSS的新手，我正在尝试为选择器的所有项目设置背景颜色。

我的css选择器如下，并返回所有项目（两个单独的UL列表）

#g-showcase .g-menu-item

我将颜色数组设置为：

$colors: #fad941, #ffffff, #e02520, #a6a6a6, #c6c6c6, #e02520;

我想迭代我的选择器结果并从我的颜色数组中设置一个独特的颜色（可能比上面的颜色更大）。

我开始玩一些代码，但我错误地处理了它，因为我正在迭代颜色而不是选择项。（不知道该怎么做:(）

@for $i from 1 through length($colors) {

    #g-showcase li:nth-child(#{length($colors)}n+#{$i}) {
        background: nth($colors, $i)
    }

}

我怎样才能达到预期的效果？

谢谢！

S上。

Answer 1

你遇到的问题是 - 就SASS而言 - 它不知道你的HTML代码有多少项目，它是一个从未真正看到过DOM的预处理器，所以它不知道何时停止生成CSS

我假设你要做的是能够选择每个li项目设置的背景颜色，而不是你现在拥有它的颜色，它按颜色数组中出现的顺序应用颜色。

要做到这一点，您可以为HTML添加一些额外的标记以提供生成的CSS，并使用地图稍微调整您创建数组的方式。您可能希望避免污染您的HTML会出现错误的标记，但下面的内容会有效。

$colorz: (
foo:  #f24162, 
 bar: #591240, 
  fee: #4c5573, 
  fum: #6fa0a6, 
  eye: #71d9d9
);

@each $pointer, $bgcolor in $colorz
{
  #g-showcase li[pointer="#{$pointer}"] {
      background: $bgcolor;
    }
}

<ul id="g-showcase">
    <li class="g-menu-item" pointer='bar'>The quick</li>
    <li class="g-menu-item" pointer='foo'>Brown Fox</li>
    <li class="g-menu-item" pointer='fee'>Jumped over</li>
  <li class="g-menu-item" pointer="bar">the lazy</li>
  <li class='g-menu-item' pointer="eye">dog</li>
</ul>
<ul id="g-showcase">
    
    <li class="g-menu-item" pointer="fum">...and other exciting stories</li>
  <li class="g-menu-item">that you hear from time-to-time</li>  
</ul>

注意以上不会“运行”因为它是sass，所以在CodePen http://codepen.io/anon/pen/GJLXMq上有一个可用的版本

SCSS列表项颜色迭代

1 个答案: