如何在LESS中反转颜色答案

【问题标题】：How to invert colors in LESS如何在LESS中反转颜色
【发布时间】：2012-12-03 02:48:43
【问题描述】：

是否有我看不到的特定颜色操作可以反转颜色？我看到了很多颜色方法，但看不到这样做的方法。

参考：

http://lesscss.org/

【问题讨论】：

标签： colors less

【解决方案1】：

反转颜色有多种解释。

你想要一种相反色调的颜色：

spin(@color, 180)
您想要一种与当前颜色相加为白色的颜色：

#fff - @color

【讨论】：

【解决方案2】：

很遗憾，Less 中没有 invert() 函数。

我认为 spin() 的 Less 函数会非常有用，因为 xiaoyi's answer 会突出显示。将它用于“彩色”颜色，如红色或蓝色 (spin(red, 180))，我们会得到反转的颜色，但在非常深或浅的颜色上我们并没有真正得到相同的结果，因为没有太多可以旋转的色调。比如spin(#000011, 180)编译成颜色#111100，也很暗。

如果背景很亮，我想将段落的颜色设置为black，如果背景很暗，我想将其设置为white。以下是我使用if()、boolean() 和luma() 的方法：

@bkg-color: #001;
@is-bg-dark: boolean(luma(@bkg-color) > 50%);

.container {
  background-color: @bkg-color;
}

p {
  color: if(@is-bg-dark, black, white);
}

Read more about Less functions 如 boolean()。

【讨论】：

【解决方案3】：

我认为没有反转颜色的特定功能，但您可以将颜色设置为变量。例如：

@color1: #666;
@color2: #fff;

body {
background-color: @color1;
color: @color2;
}

h1 {
color: @color2;
}

然后，只需制作一个备用样式表，将倒置颜色设置为主要样式表中使用的变量。只要您在整个 css 中使用变量，这些颜色就会被反转。

【讨论】：

我 +1 你，但如果可能的话，我想要一种在 LESS 环境中执行此操作的方法。