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

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