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

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

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

我期望使用该代码，每次迭代都会更改变量$ color，但这并未按预期工作。拳头初始化后该值是固定的，并且每个元素都具有相同的颜色。

有没有解决该问题的方法，还是有解决混合问题的另一种方法？

最佳答案

您可以使用@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