css - 如何将两种特定颜色之间的阶梯式渐变生成为单独的类

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 中的两种特定颜色之间产生正确的阶梯渐变: