Question

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

类似的东西：

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

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

Answer 1

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

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

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

Answer 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

如何确定Sass的颜色是否为灰度？

2 个答案: