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

【问题标题】：Conditional CSS based on background color variable基于背景颜色变量的条件 CSS
【发布时间】：2014-02-06 10:53:49
【问题描述】：

是否可以根据较少变量的明暗来设置颜色？

目前我有以下代码：

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

如果@bodyBackground 是浅色，则此方法有效。但是，如果它是深色，我想使用lighten(@bodyBackground, 10%)。 LESS 可以做到这一点吗？

【问题讨论】：

见contrast函数。
是的，就是这样。你能把它添加为答案吗？

标签： less

【解决方案1】：

有contrast函数，例如：

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

【讨论】：

【解决方案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%);
}

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

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

【讨论】：

比对比功能更智能的地方是什么？
它更智能，因为您可以一次调整多个属性。
@gco，所以您只需将 mixin 硬编码到特定的属性集，然后必须为每个新的属性集复制粘贴相同的代码？每个属性都重复？这如何更智能？