colors - 如何在LESS中反转颜色

Question

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

参考：

http://lesscss.org/

Answer 1

There are multiple interpretation of inverting color.

• You want a color with the opposite hue:

  spin(@color, 180)

• You want a color that the sum with current one is white:

  #fff - @color

Answer 2

不幸的是invert()，Less 中没有任何功能。

我认为随着小义的回答突出显示spin()，Less 功能会非常有帮助。将它用于红色或蓝色（例如编译成颜色#111100，它也很暗。spin(red, 180)spin(#000011, 180)

我想将段落的颜色设置为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);
}

阅读有关较少函数的更多信息，例如 boolean()。

Answer 3

我不认为有一个特定的函数可以反转颜色，但你可以做的就是将你的颜色设置为变量。例如：

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

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

h1 {
color: @color2;
}

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