css - 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

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