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

Question

我需要创建一个css背景颜色列表逐渐变暗以达到目标黑暗.我知道可以使用这里陈述的技术:Sass:用@for循环改变颜色 但是我想要从一种颜色调制到另一种颜色.不只是让颜色更暗更暗.

我有一个可变数量的项目,并希望背景颜色从白色移动到黑色.基本上是一个阶梯式渐变,定义了开始和结束颜色.

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

.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

想要它们以相反的顺序？只需交换颜色.