Question

尝试在指南针库中使用SCSS中的 .contrast-color 函数生成与属于LESS的 .contrast 不同的颜色，即使LESS中的规范另有规定。

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

以下是我使用SCSS版本的对比色和输出的CSS的示例。

SCSS gist

这是LESS版本。

LESS version

在SCSS中是否有类似LESS对比功能？如果没有，怎么会转换它。看看来源，LESS中似乎有很少的依赖关系可以让对比起作用。

Answer 1

<强>原因：

不，这两个功能不一样。在Less中，contrast功能根据伽玛校正的亮度值比较颜色。以下是Less documentation：

的摘录

根据WCAG 2.0，使用伽马校正的亮度值比较颜色，而不是它们的亮度。

而在萨斯，他们是comparing the colors based on brightness of the colors。此函数提供luminance value as the output而不是亮度值。所以他们给出了不同的输出。

<强>解决方案：

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

对于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否则B =（（BsRGB + 0.055）/1.055) ^ 2.4   并且RsRGB，GsRGB和BsRGB定义为：

RsRGB = R8bit / 255

GsRGB = G8bit / 255

BsRGB = B8bit / 255

我不是自己编写这个自定义函数的Sass专家，所以我从this article by 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 is using for the luma function的代码，它与上面给出的自定义函数非常相似。此函数返回与上面给出的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;
};

注意：

如果我们使用luma(darken(@bg,10%))，则Less编译器将23.64695145作为输出。这与Sass自定义函数的输出略有不同，即23.83975738。但luma(#868686)提供与Sass自定义函数相同的输出，因此我不认为自定义函数是错误的。
某些SASS编译器没有上面使用的pow()函数所需的本机de-gamma函数。因此，您可能需要包含一个库，该库具有此类或至少pow()功能的库。一个例子是Sassy-Math。

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

1 个答案: