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

Question

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

关于 this page ，我找到以下解释:

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

我有这两种颜色:

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

第一种颜色的亮度为 60，第二种颜色的亮度为 65。我希望 Less 能为我提供两种颜色的 @lightcolor。但这不是我得到的结果!

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

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

Answer 1

Note: The source code for v0.5.0 shows that lessphp is also now checking luma values instead of lightness (used in v0.4.0) and hence upgrading to the latest version should also solve the problem.

这似乎不是错误，而是 contrast 函数在 Less.js、Less.PHP 和 lessphp 中的工作方式的差异(upto v0.4.0).

在 Less.js 和 Less.PHP 中，对比度函数根据引用颜色的 luma 值决定输出颜色。给出的 2 种颜色的 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 功能描述如下:(看起来 doc 未更新 v0.5.0 更改)

contrast(color, dark, light) — if color has a lightness value greater than 50% then dark is returned, otherwise return light.

第一种颜色的亮度值为 54%，而第二种颜色的值为 48%。因此，lessphp 在第一种颜色用作引用时输出 @darkcolor，在第二种颜色用作引用时输出 @lightcolor。

您可以在 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;

---

很可能是 lessphp 在 Less 官方(JS 版本)之前，首先根据 lightness 值引入了 contrast 功能编译器实现了相同的功能，但它基于 luma 而不是 lightness 值。以下声明可以在 Less documentation 中找到:

This function works the same way as the contrast function in Compass for SASS. In accordance with WCAG 2.0, colors are compared using their gamma-corrected luma value, not their lightness.