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

时间:2016-11-16 20:59:06

标签: sass

使用Sass,是否可以确定颜色是否为灰度?

类似的东西:

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

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

2 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分:1)

如果颜色为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