css - LESS contrast() 函数

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 ，它有一个关于如何正确使用对比度的例子:

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用于演示。