css - Sass:使用@for 循环更改颜色

Question

我尝试像这样将可变数量的 div 变暗 使用以下代码:

@mixin color-divs ($count, $baseName, $startcolor) {
    $color:  $startcolor;
    @for $i from 0 through $count {
        $color: darken($color, 9%);
        ##{$baseName}_#{$i} { background-color:$color; }
    }
}

使用我期望的代码，变量 $color 会随着每次迭代而改变，但这并没有按预期工作。该值在第一次初始化后固定，并且每个元素具有相同的颜色。

是否有解决该问题的方法，或者是否有另一种方法通过混合解决该问题？

Answer 1

您可以在@for 中使用$i 使颜色变暗，并将相应的类应用于div。希望这会有所帮助。

SCSS

@mixin color-divs ($count, $baseName, $startcolor) {
    @for $i from 0 through $count {
        $background-color: darken($startcolor, $i * $i); 
    .colored-div#{$i} {
      background: $background-color;
      height:100px;
      width:200px;
      float: left;
      margin-right: 5px;
    }
   }

}
 @include color-divs(5,'a',#ffd8b1);

HTML

<div class="colored-div1">a</div>
<div class="colored-div2">b</div>
<div class="colored-div3">c</div>
<div class="colored-div4">d</div>
<div class="colored-div5">e</div>

演示

参见 demo