SCSS对比度(来自指南针)输出与较小的对比度不同

Question

试图在SCSS中使用来自指南针库的.对比度颜色函数会产生与.contrast不同的颜色，而后者属于较少的颜色，而另一种情况下则为较少的状态。

该函数的工作方式与Compass中的SASS对比函数相同。http://lesscss.org/functions/

下面是我使用SCSS版本的对比色和输出的css的一个例子。

SCSS要点

下面是较少的版本。

减版

在SCSS中有类似的类似的小对比度功能吗？如果没有，人们将如何去转换它。从源头上看，相对于工作而言，似乎有几个依赖者在较少的范围内。

Answer 1

原因：

不，这两种功能不一样。在较少的，contrast函数比较基于伽马校正的卢马值的颜色。下面是减文件的摘录

根据WCAG2.0，颜色的比较使用的是伽马校正的卢马值，而不是它们的亮度.

而在Sass中，它们是颜色的。这个函数提供的是亮度值作为输出，而不是luma值。所以他们给出了不同的输出。

解决方案：

虽然Less有一个函数来直接得到伽马校正的luma值，但是Sass似乎没有任何内置函数来提供这个值。因此，我们必须编写基于WCAG2.0规范的自定义函数。这里提供了计算逻辑，下面是摘录：

对于sRGB颜色空间，颜色的相对亮度定义为L= 0.2126 * R + 0.7152 *G+ 0.0722 *B，其中R、G和B定义为： 如果RsRGB <= 0.03928，则R= RsRGB/12.92 12.92= ((RsRGB+0.055)/1.055) ^ 2.4 如果GsRGB <= 0.03928，则G= GsRGB/12.92 12.92= ((GsRGB+0.055)/1.055) ^ 2.4 如果BsRGB <= 0.03928，则B= BsRGB/12.92，则B= ((BsRGB+0.055)/1.055) ^ 2.4和RsRGB、GsRGB和BsRGB定义为： RsRGB = R8bit/255 GsRGB = G8bit/255 BsRGB = B8bit/255

我不是Sass的专家，我自己编写这个自定义函数，所以我从本文作者是托尼·皮内尔那里得到了一些帮助(嗯，几乎所有东西都不包括他的re-gamma函数)。如果您使用下面的contrast-color函数，它将提供与“更少”相同的输出。

@function de-gamma($n) { @if $n <= 0.03928 { @return $n / 12.92; } @else { @return pow((($n + 0.055)/1.055),2.4); } }

// sRGB BT-709 BRIGHTNESS
@function brightness($c) {
    $rlin: de-gamma(red($c)/255);
    $glin: de-gamma(green($c)/255);
    $blin: de-gamma(blue($c)/255);
    @return (0.2126 * $rlin + 0.7152 * $glin + 0.0722 * $blin) * 100;
}

// Compares contrast of a given color to the light/dark arguments and returns whichever is most "contrasty"
@function contrast-color($color, $dark: #000000, $light: #FFFFFF) {
    @if $color == null {
        @return null;
    }

    @else {
        $color-brightness: brightness($color);
        $light-text-brightness: brightness($light);
        $dark-text-brightness: brightness($dark);

        @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
    }
}

下面是函数的代码，它非常类似于上面给出的自定义函数。此函数返回与上面给出的Sass自定义函数相同的输出。

Color.prototype.luma = function () {
    var r = this.rgb[0] / 255,
        g = this.rgb[1] / 255,
        b = this.rgb[2] / 255;

    r = (r <= 0.03928) ? r / 12.92 : Math.pow(((r + 0.055) / 1.055), 2.4);
    g = (g <= 0.03928) ? g / 12.92 : Math.pow(((g + 0.055) / 1.055), 2.4);
    b = (b <= 0.03928) ? b / 12.92 : Math.pow(((b + 0.055) / 1.055), 2.4);

    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
};

备注：

1. 如果我们使用luma(darken(@bg,10%))，那么较少的编译器提供23.64695145作为输出。这与Sass自定义函数的输出( 23.83975738 )略有不同。但是luma(#868686)提供与Sass自定义函数相同的输出，因此我不认为定制函数是错误的。
2. 有些SASS编译器没有本机pow()函数，这是上面使用的de-gamma函数所必需的。出于这个原因，您可能需要包含一个库，该库具有此函数，或者至少包含此库中的pow()函数。萨西-数学就是一个例子。