SCSS 对比度（来自 Compass）输出与 LESS 的对比度不同

Question

尝试使用来自指南针库的 SCSS 中的.contrast-color函数会生成与LESS中的.contrast不同的颜色，即使 LESS 中的规范另有说明。

此功能的工作方式与 Compass for SASS 中的对比度功能相同。 http://lesscss.org/functions/

这是我使用对比度颜色的 SCSS 版本和输出的 css 的示例。

SCSS 要点

这是 LESS 版本。

少版本

SCSS 中是否有类似的 LESS 对比函数？如果没有，人们将如何转换它。查看源代码，LESS 中似乎有一些依赖项，以便进行对比。

Answer 1

原因：

不，这两个功能不一样。在 Less 中，该contrast函数根据伽马校正亮度值比较颜色。以下是Less 文档的摘录：

根据 WCAG 2.0，颜色是使用经过伽马校正的亮度值而不是亮度进行比较的。

而在 Sass 中，他们是根据颜色比较brightness颜色。此函数将亮度值作为输出而不是亮度值。所以他们给出了不同的输出。

解决方案：

虽然 Less 有一个luma函数可以直接获取伽马校正亮度值，但 Sass 似乎没有任何内置函数来提供这个值。因此，我们必须根据WCAG 2.0 规范编写自定义函数。那里提供了计算逻辑，下面是摘录：

对于 sRGB 色彩空间，颜色的相对亮度定义为 L = 0.2126 * R + 0.7152 * G + 0.0722 * B，其中 R、G 和 B 定义为：

如果 RsRGB <= 0.03928 那么 R = RsRGB/12.92 否则 R = ((RsRGB+0.055)/1.055) ^ 2.4

如果 GsRGB <= 0.03928 那么 G = GsRGB/12.92 否则 G = ((GsRGB+0.055)/1.055) ^ 2.4

如果 BsRGB <= 0.03928 那么 B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4 并且 RsRGB、GsRGB 和 BsRGB 被定义为：

RsRGB = R8bit/255

GsRGB = G8bit/255

BsRGB = B8bit/255

我不是 Sass 专家，无法自己编写这个自定义函数，所以我从Toni Pinel 的这篇文章中获得了一些帮助（好吧，几乎所有东西都禁止他的re-gamma函数）。如果您使用以下contrast-color函数，它将提供与 Less 相同的输出。

@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);
    }
}

下面是Less 用于该luma函数的代码，它与上面给出的自定义函数非常相似。此函数返回与上面给出的 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%))，Less 编译器会给出 23.64695145 作为输出。这与 Sass 自定义函数的输出略有不同，即 23.83975738。但是luma(#868686)给出与 Sass 自定义函数相同的输出，所以我认为自定义函数没有错。

2. 一些 SASS 编译器没有上面使用pow()的de-gamma函数所需的本机函数。出于这个原因，您可能需要包含一个库，该库具有此pow()功能或至少来自此类库的功能。一个例子是Sassy-Math。