css - Lessphp对比函数的输出与文档不匹配

我第一次使用contrast函数，并认为它有问题。

在this page上，我找到以下解释：

contrast(@color1, @darkcolor, @lightcolor);
    // outputs @darkcolor, when @color1 have more than 43% Luma
    // if not it outputs @lightcolor

我有以下2种颜色：

@gBlue: #2196F3;
@gLightBlue: #03A9F4;

第一种颜色具有60亮度，第二种颜色具有65亮度。我希望Less会给我两种颜色的@lightcolor。但这不是我得到的结果！

Lessphp为@darkcolor返回@gBlue，为@lightcolor返回@gLightBlue。

谁能告诉我为什么这样做？这是一个错误吗？为什么在两种情况下我都没有得到@lightcolor？

最佳答案

注意：v0.5.0的源代码显示lessphp现在也正在检查亮度值而不是亮度（在v0.4.0中使用），因此升级到最新版本也可以解决该问题。


这似乎不是一个错误，但是在contrast函数在Less.js，Less.PHP和lessphp（最高v0.4.0）中的工作方式方面有所不同。

在Less.js和Less.PHP中，对比度函数根据参考颜色的luma值确定输出颜色。有问题的两种颜色的luma值小于43％，因此它们输出@lightcolor。
您可以在Less2CSS.org（在线Less.js编译器）和Online Less.PHP compiler处检查以下代码的输出。

#sample{
  color:contrast(@color1, @darkcolor, @lightcolor);
  luma-color1: luma(@color1);
  luma-color2: luma(@color2);
}

@color1: #2196F3;
@color2: #03A9F4;
@darkcolor: black;
@lightcolor: white;

但是，lessphp documentation对contrast函数的描述如下：（看起来该文档未通过v0.5.0的更改进行更新）


  contrast(color, dark, light) —如果颜色的亮度值大于50％，则返回暗，否则返回亮。


第一种颜色的lightness值为54％，第二种颜色的@darkcolor为48％。因此，当使用第一种颜色作为参考时，lessphp输出@lightcolor，当使用第二种颜色作为参考时，输出contrast。

您可以在Online lessphp compiler for v0.4.0尝试以下代码，以了解我的意思：

#sample{
  color:contrast(@color2, @darkcolor, @lightcolor);
  lightness-color1: lightness(@color1);
  lightness-color2: lightness(@color2);
}

@color1: #2196F3;
@color2: #03A9F4;
@darkcolor: black;
@lightcolor: white;

可能很容易的是，在正式的Less（JS版本）编译器实现相同功能但基于lightness而不是luma值之前，lessphp首先基于lightness值引入了函数。可以在Less documentation中找到以下语句：


  此功能的作用方式与contrast function in Compass for SASS相同。根据WCAG 2.0，使用经过伽玛校正的亮度值而不是亮度来比较颜色。