在CSS选择器中覆盖LESS变量

Question

我正在寻找一种方法来覆盖CSS选择器中的LESS变量 以下示例不起作用：

@main: #01b2bb;

body.purple{
   @main: #937cb8;
}
#wrapper header{background-color: @main}

当正文为紫色时，我预计＃937cb8 作为输出。

Answer 1

常用

通常使用LESS，可以使用不同的变量文件来提供一组不同的css（不同的文件），就像你的情况一样，body.purple css，其中{ {1}}最初在变量文件中全局定义@main（因此它是“紫色”变量文件）。这样可以减少css代码，但需要一个人在#937cb8的类更改时提供新文件。

任选地

但是，如果你想在一个单独的css文件中区分类，那么最好将代码抽象出更多，这样的东西可以通过将所有颜色定义在一个mixin中来使其更易于管理：< / p>

<强> LESS

body

CSS输出

.setColors() {
  @main: #01b2bb; //default     
  .purple & {
    @main: #937cb8;
    .setCss();
  }
  .red & {
    @main: #ff0000;
    .setCss();
  }
  .blue & {
    @main: #0000ff;
    .setCss();
  }
}

#wrapper header {
  .setColors();
  .setCss() {
    background-color: @main;
  }
}

.myListClass {
  .setColors();
  .setCss() {
    li {
      background-color: fade(@main, .5);
    }
    > a {
      color: @main;
    }
  }
}

现在，这将使用颜色将颜色类附加到任何颜色的前面，然后根据该父类创建css以更改颜色。请注意，任何期望使用颜色的内容都必须调用.purple #wrapper header { background-color: #937cb8; } .red #wrapper header { background-color: #ff0000; } .blue #wrapper header { background-color: #0000ff; } .purple .myListClass li { background-color: rgba(147, 124, 184, 0.005); } .purple .myListClass > a { color: #937cb8; } .red .myListClass li { background-color: rgba(255, 0, 0, 0.005); } .red .myListClass > a { color: #ff0000; } .blue .myListClass li { background-color: rgba(0, 0, 255, 0.005); } .blue .myListClass > a { color: #0000ff; } mixin，然后必须在本地定义的setColors(); mixin中定义更改颜色css（如上所示）。这只是为控制颜色的各种父类输出css的一种方法。

Answer 2

您错过了紫色类的background-color属性：

@main: #01b2bb;

body.purple{
   @main: #937cb8;
   background-color: @main;
}
#wrapper header{background-color: @main}