Question

是否可以根据变量较小的亮度/暗度设置颜色？

目前我有以下代码：

li {
    color: darken(@bodyBackground, 10%);
}

这项工作提供@bodyBackground是浅色。但是，如果它是深色我想使用lighten(@bodyBackground, 10%)。 LESS可以实现吗？

Answer 1

有contrast功能，例如：

li {
    color: contrast(@bodyBackground,
            lighten(@bodyBackground, 13%),
             darken(@bodyBackground, 13%));
}

Answer 2

你可以比这更聪明。你可以制作一个mixin来检查所提供的颜色，并根据其颜色进行变暗或变亮：

.smart-text-color (@a) when (lightness(@a) >= 50%) {
  // Its a light color return a dark output
  color: darken(@a, 60%);
}
.smart-text-color (@a) when (lightness(@a) < 50%) {
  // Its a dark color return a dark output
  color: lighten(@a, 60%);
}

这是一个示例mixin，它将背景颜色作为变量，并计算出要使用的文本颜色。返回亮或暗输出。

http://codepen.io/TristanBrotherton/pen/GwIgx?editors=110

基于背景颜色变量的条件CSS

2 个答案: