尝试在 SCSS 中使用 compass 库中的 .contrast-color 函数会生成与属于 LESS 的 .contrast 不同的颜色,即使LESS 中的规范另有说明。
This function works the same way as the contrast function in Compass for SASS. http://lesscss.org/functions/
这是我使用 SCSS 版本的 contrast-color 和输出的 css 的例子。
这里是 LESS 版本。
SCSS中有like for like LESS对比功能吗?如果没有,将如何转换它。查看源代码,在 LESS 中似乎有相当少的依赖关系可以工作。
最佳答案
原因:
不,这两个功能不一样。在 Less 中,contrast
函数根据 Gamma 校正后的亮度值比较颜色。以下是 Less documentation 的摘录:
In accordance with WCAG 2.0, colors are compared using their gamma-corrected luma value, not their lightness.
而在 Sass 中,它们是 comparing the colors based on brightness
of the colors .这个函数给出了 luminance value as the output而不是亮度值。所以他们给出了不同的输出。
解决方案:
虽然 Less 有一个 luma
function为了直接获得 Gamma 校正后的亮度值,Sass 似乎没有任何内置函数来提供这个值。因此,我们必须根据 WCAG 2.0 specifications 编写自定义函数.那里提供了计算逻辑,下面是摘录:
For the sRGB colorspace, the relative luminance of a color is defined as L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as:
if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4
if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4
if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4 and RsRGB, GsRGB, and BsRGB are defined as:
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 编译器没有上面使用的
de-gamma
函数所需的 nativepow()
函数。出于这个原因,您可能需要包含一个库,该库具有此库或至少具有此类库中的pow()
函数。 Sassy-Math 就是一个例子。
关于html - SCSS Contrast(来自 Compass)输出与 LESS 的对比度不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40265793/