SCSS对比度（从罗盘）不同于LESS的对比度

Question

试图从罗盘库使用.contrast色功能在SCSS正在产生不同的颜色，以使得的.contrast输出属于在LESS即使否则，LESS中的规格说明。

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

这里是我使用SCSS版本的contrast-color和输出的css的一个例子。

SCSS gist

，这里是少的版本。

LESS version

有没有像像SCSS LESS对比功能？如果不是，那么将如何转换它。从源头上看，在LESS中似乎有相当一部分依赖于工作的对比。

Answer 1

原因：

没有，这两个功能是不一样的。在更少的情况下，contrast函数会根据伽马校正的亮度值比较颜色。以下是Less documentation的摘录：

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

鉴于在Sass中，它们是comparing the colors based on brightness of the colors。此功能给出luminance value as the output而不是亮度值。所以他们给出了不同的结果。

---

解决方案：

虽然较少有luma function直接获得伽马校正的亮度值也，萨斯似乎没有任何内置功能来提供此值。所以，我们必须编写基于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

if 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; 
}; 

注：

1. 如果我们使用luma(darken(@bg,10%))，少编译器是给23.64695145作为输出。这与Sass自定义函数的输出（23.83975738）略有不同。但luma(#868686)给出了与Sass自定义函数相同的输出，所以我不认为自定义函数是错误的。

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