Question

您可能知道LESS提供了许多面向色彩的操作（例如：darken()，lighten()和mix()），它们都很有效。不幸的是，我无法开始理论上最酷的工作之一：自动设置颜色与您提供的颜色形成鲜明对比的功能。来自官方的LESS规范：

contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]);

所以，我的LESS基本上提供了一个背景变量，它可以变化很多（我正在使用基于主题的网站）并且它的文本颜色应该适应。

   &.popup{
      .body{
         background-color: @popupBg;
         color: contrast(@popupBg, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]);
      }
   }

在检查控制台中的输出代码时，我可以看到该功能未正确解析（Chrome通知错误，Firefox只是隐藏它）。我也尝试了简化版本，它只是color: contrast(@popupBg);并且没有运气。

以前有人用过这个吗？我现在一直在使用LESS，这是第一次给我带来问题。

Answer 1

方括号表示可选参数，不应出现在您的代码中。查看LESS函数参考及其documentation on contrast，它有一个关于如何正确使用contrast的示例：

Example:

contrast(#aaaaaa)
contrast(#222222, #101010)
contrast(#222222, #101010, #dddddd)

Output:

#000000 // black
#ffffff // white
#dddddd

所以你的代码应该是：

color: contrast(@popupBg, black, white, 43%);

另一方面，您确定@popupBg已定义吗？

查看this jsfiddle了解演示。

Answer 2

你可以使用：

contrast(@popupBg, lighten(black, 12%), darken(white, 12%));

较少的对比度（）功能

2 个答案: