如何在LESS中反转颜色

Question

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

参考：

http://lesscss.org/

Answer 1

对反转颜色有多种解释。

• 您想要一种颜色相反的颜色：

  spin(@color, 180)

• 您想要一种颜色与当前颜色的总和为白色：

  #fff - @color

Answer 2

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

我认为较少功能spin()在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（）。

Answer 3

我认为没有特定的功能来反转颜色，但你可以做的是将颜色设置为变量。 e.g：

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

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

h1 {
color: @color2;
}

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