如何使用 Sass 确定颜色是否为灰度？答案

【问题标题】：How can I determine if a color is greyscale with Sass?如何使用 Sass 确定颜色是否为灰度？
【发布时间】：2017-03-31 05:53:07
【问题描述】：

使用 Sass，是否可以确定颜色是否为灰度？

类似：

is-greyscale(#ffffff); // returns true

我可以看到可以在 Sass 中将颜色转换为灰度，但我不确定如何使用它来确定给定颜色是否为灰度。

【问题讨论】：

标签： sass

【解决方案1】：

事实证明这很容易，我在发布这个问题后立即想通了：

@function is-grayscale($color) {
  @return if(grayscale($color) == $color, true, false);
}

@debug is-grayscale(white); // returns true
@debug is-grayscale(blue); // returns false

【讨论】：

请问您对这个功能的使用情况？我有点好奇。 :)
我有一张包含各种颜色的地图。对于每种颜色，我想创建一个类来充当按钮修饰符。该类将更改按钮的背景。如果按钮不是灰度的，我总是希望按钮的文本颜色为白色。如果按钮是灰度的，根据背景的亮度，我希望文本为白色或灰色，如果有意义的话。
是的。谢谢你的解释，很有趣！

【解决方案2】：

如果颜色是 100% 灰度，上面的逻辑是正确的，但是有很多颜色是“几乎”灰度的，例如#DEDED9

下面的函数测量颜色的饱和度，如果结果小于8%，则认为颜色为灰度。

例子：

@debug color.saturation(#DEDED9); // returns => 7.0422535211%
@debug color.saturation(#E2E2D5); // returns => 18.3098591549%

功能：

@function is-color-grayscale($color){
    $saturation: color.saturation($color);

    @if ($saturation < 8%) {
        @return true;
    } @else{
        @return false;
    }
}

结果：

@debug is-color-grayscale(#DEDED9); // returns => true
@debug is-color-grayscale(#E2E2D5); // returns => false

【讨论】：

这太棒了！实际上我的用例也需要（我之前手动向包含颜色值的地图添加一个键，指定是否应将其视为灰度，这要好得多）