如何在两种特定颜色之间生成阶梯渐变到单独的类中

Question

我需要帮助找出如何使用SASS和可用的颜色函数在两种特定颜色之间创建阶梯渐变到单独的类中。

从任何给定的颜色开始，例如＃f1a100和结束颜色＃2ec3fb，生成几个在两者之间呈阶梯渐变的类。

我从这段代码开始，但显然没有产生预期的结果。如何在两种特定颜色之间切换？

$startColor: #f1a100;
@for $i from 1 through 8 {
    &.m#{$i} {
        background: adjust-hue($startColor, 0 - ($i * 10));
    }
}

此代码产生以下结果：

Answer 1

找到this公式，这是错误的（更改为200到255），并将其修改为以下内容：

div {
    $startColor: #f1a100;
    $endColor: #2ec3fb;
    $divider: 255;
    $steps: 10;
    $scaler: $divider / $steps;
    @for $i from 1 through $steps {
        $scaledStep: $i * $scaler;
        $redStart: red($startColor);
        $greenStart: green($startColor);
        $blueStart: blue($startColor);
        $redEnd: red($endColor);
        $greenEnd: green($endColor);
        $blueEnd: blue($endColor);
        $R: ($redStart * (($divider - $scaledStep) / $divider)) + ($redEnd * ($scaledStep / $divider));
        $G: ($greenStart * (($divider - $scaledStep) / $divider)) + ($greenEnd * ($scaledStep / $divider));
        $B: ($blueStart * (($divider - $scaledStep) / $divider)) + ($blueEnd * ($scaledStep / $divider));

        &.m#{$i} {
            background: rgb($R, $G, $B);
        }
    }
}

这会在SASS中的两种特定颜色之间产生正确的阶梯渐变：

Answer 2

要在2个值之间进行插值，公式略有不同。 你需要这样的东西

$startColor: #f1a100;
$endColor: #2ec3fb;
$startHue: hue($startColor);
$endHue: hue($endColor);

@for $i from 1 through 8 {
    &.m#{$i} {
        background: adjust-hue($startColor, startHue + ((endHue - startHue) * ($i / 8)));
    }
}

假设你的饱和度和光值有些相似