0

我contrast第一次使用该功能并认为它有问题。

在此页面上，我找到以下解释：

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 返回@darkcolorfor@gBlue和@lightcolorfor @gLightBlue。

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

在此处输入图像描述

4

1 回答 1

1

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

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

在Less.js 和 Less.PHP中，对比度函数根据luma参考颜色的值决定输出颜色。所讨论的 2 种颜色的luma值小于 43%，因此它们输出@lightcolor. 您可以在Less2CSS.org（在线 Less.js 编译器）和在线 Less.PHP 编译器上查看以下代码的输出。

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

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

然而，lessphp 文档对contrast函数的描述如下：（看起来文档没有随着 v0.5.0 的变化而更新）

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

第lightness一种颜色的值为 54%，而第二种颜色的值为 48%。因此，lessphp输出@darkcolor第一种颜色作为参考和 @lightcolor第二种颜色作为参考的时间。

您可以在 v0.4.0 的Online lessphp 编译器上尝试以下代码，以了解我的意思：

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

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

很可能是lessphpcontrast在官方Less（JS版本）编译器实现相同的功能之前首先基于value引入了该函数，lightness但基于它luma而不是基于lightnessvalue。可以在Less 文档中找到以下语句：

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

于 2015-09-25T15:34:34.807 回答