1

正如您可能知道的那样，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 很多次了，这是它第一次给我带来问题。

4

2 回答 2

8

方括号表示可选参数，不应出现在您的代码中。查看 LESS 函数参考及其关于 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已定义吗？

查看这个 jsfiddle的演示。

于 2013-08-29T08:37:04.620 回答
0

你可以像这样使用：

contrast(@popupBg, lighten(black, 12%), darken(white, 12%));
于 2018-06-04T14:01:10.890 回答