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循环 - 从一种颜色到另一种颜色

1 个答案: