Sass：使用 @for 循环更改颜色答案

【问题标题】：Sass: Change color with @for loopSass：使用 @for 循环更改颜色
【发布时间】：2019-05-09 00:03:43
【问题描述】：

我尝试使可变数量的 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 ，但这并没有按预期工作。第一次初始化后，值是固定的，每个元素都有相同的颜色。

有没有办法解决这个问题，或者有没有其他方法可以通过混合来解决这个问题？

【问题讨论】：

标签： css for-loop sass

【解决方案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

【讨论】：

【解决方案2】：

我根据你的 mixin 创建了这个示例：

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

div {
    width: 100px;
    height: 100px;
    float: left;
}

@include color-divs(6,'div',#faa)

与以下标记一起使用：

<div class="div-1"></div>
<div class="div-2"></div>
<div class="div-3"></div>
<div class="div-4"></div>
<div class="div-5"></div>
<div class="div-6"></div>

输出：http://jsfiddle.net/jdtvF/

http://uk.omg.li/P0dF/by%20default%202013-05-16%20at%2010.10.43.png

div {
  width: 100px;
  height: 100px;
  float: left; }

.div-0 {
  background-color: #ff7c7c; }

.div-1 {
  background-color: #ff4e4e; }

.div-2 {
  background-color: #ff2020; }

.div-3 {
  background-color: #f10000; }

.div-4 {
  background-color: #c30000; }

.div-5 {
  background-color: #960000; }

.div-6 {
  background-color: #680000; }

【讨论】：

奇怪的事情：我在一个新项目中测试了上面的代码 - 几乎和我的一样 - 它也可以工作......

【解决方案3】：

只是从一种颜色变为另一种颜色，例如，多个连续的<div>：

    @for $i from 0 through 11
        &:nth-child(#{$i})
            transform: rotate(#{30*$i}deg)
            background-color: mix($gray1, $gray2, $i / 12 * 100% )

注意事项

请注意，mix() 中不需要任何 #{…}，因为它是一个 sass 函数，因此很明显，在将其转换为 CSS 之前，需要解析内部使用的任何变量和计算。
转换只是我的用例（用于演示）。在这里，确实需要#{…}
并注意 +/-1 issue（就像在每个 for 循环中，在任何语言中一样）：从 0/12 到 11/12
最后，把它变成一个百分比来取悦混合功能
如您所见：可以在 mixin 中完成，但并非必须如此！

【讨论】：