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>

演示

见演示