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

Question

我需要帮助弄清楚如何使用 SASS 和可用的颜色函数将两种特定颜色之间的阶梯渐变创建为单独的类。

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

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

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

此代码产生以下结果：

Answer 1

找到这个公式，是错误的（把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)));
    }
}

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