如何将两种特定颜色之间的渐变生成单独的类答案

【问题标题】：How to generate a stepped gradation between two specific colors into separate classes如何将两种特定颜色之间的渐变生成单独的类
【发布时间】：2013-09-14 02:02:19
【问题描述】：

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

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

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

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

此代码产生以下结果：

【问题讨论】：

为什么不直接使用 CSS 渐变？
为什么不看问题的标题和内容？
我读过但不明白你为什么不使用 CSS 渐变，因此我的评论。
@Itay 我认为他不需要渐变。他需要几种介于两种颜色之间的颜色
@EL 是的，但他将它们用于 CSS 类，因此我不明白他为什么不使用普通 CSS

标签： css colors sass

【解决方案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 中的两种特定颜色之间产生正确的阶梯渐变：

【讨论】：

如果开始或结束颜色中的任何 RGB 组件为 0 或 255，则上述代码将无法编译。

【解决方案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)));
    }
}

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

【讨论】：

作为一个 SASS 新手，我正在尝试使用它，但这似乎不是有效的 sass：第 8 行第 58 列的乘法操作数无效