Sass：用@for循环改变颜色 [英] Sass: Change color with @for loop

问题描述

我尝试使可变数目的div变暗，例如
代码：

I try to darken a variable number of divs like that with following code:

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

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

With that code I was expecting, that the variable $color is changed with every iteration but this didn't work as expected. The value is fix after the fist initialisation and every element has the same color.

有办法解决这个问题，或者有另一种方法来解决这个问题混合？

Is there a way to workarround that problem or is there another way to solve that problem with a mixing?

推荐答案

您可以使用@for @for中的$ i来使颜色变暗，并将各个类应用到div。希望这有帮助。

You can darken the color using $i inside @for and apply respective classes to the divs. Hope this helps.

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>

演示

请参阅演示

这篇关于Sass：用@for循环改变颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！