Sass @for 循环 - 从一种颜色到另一种颜色

Question

我需要创建一个 css 背景颜色列表，逐渐变暗以达到目标黑暗。我知道可以使用此处所述的技术：Sass: Change color with @for loop 但是我想从一种颜色调制到另一种颜色。不仅仅是让颜色越来越深

我有可变数量的项目，并且希望背景颜色从白色变为黑色。基本上是一个定义了开始和结束颜色的阶梯渐变。

所以如果我有三个项目，我希望输出是这样的：

.class1 {
  background-color: #fff;
}
.class2 {
  background-color: #808080; // 50% brightness
}
.class3 {
  background-color: #000;
}

如果我有五件物品，它会看起来像这样：

.class1 {
  background-color: #fff;
}
.class2 {
  background-color: #bfbfbf; // 75% brightness
}
.class3 {
  background-color: #808080; // 50% brightness
}
.class4 {
  background-color: #404040; // 25% brightness
}
.class5 {
  background-color: #000;
}

开始和结束颜色应始终相同，但中间颜色需要根据循环中的项目总数自动调整。

我不知道 Sass 是否可以实现这样的事情？？

Answer 1

您在这里需要的函数是mix();

$color-1: white;
$color-2: black;

$steps: 5;

@for $i from 0 to $steps {
    .class-#{$i + 1} {
        background: mix($color-1, $color-2, percentage($i / ($steps - 1)));
    }
}

输出：

.class-1 {
  background: black;
}

.class-2 {
  background: #3f3f3f;
}

.class-3 {
  background: #7f7f7f;
}

.class-4 {
  background: #bfbfbf;
}

.class-5 {
  background: white;
}

http://sassmeister.com/gist/d0fc452765908aac2617

想要它们的顺序相反吗？只是交换颜色。

Sass @for 循环 - 从一种颜色到另一种颜色

Sass @for loop - from one color to another color

css

for-loop

sass