Question

我需要设置一个Less变量来匹配网站的活动主题，即每个主题都有不同的颜色。

我想根据HTML定义主题的body CSS类将@themeColor设置为正确的颜色。

例如：

body.themeBlue { @themeColor: blue; }
body.themeRed { @themeColor: red; }

这样我只需要在其他Less文件中使用@themeColor变量。

有人可以帮忙吗？根据这个（http://www.lesscss.org/#-scope），可以做类似的事情，但我无法使其发挥作用。这是怎么回事？

Answer 1

LESS文件无法在运行时读取应用于html body元素的实际类（您可能需要实现一个javascript解决方案来执行类似的操作）。

如果您只想基于body类准备好使用所有主题css，那么实现它的最佳方法是在mixin中包含所有必需的基于主题的css，然后将其应用于主题类。这减少了代码重复。例如：

<强> LESS

//mixin with all css that depends on your color
.mainThemeDependentCss() {
  @contrast: lighten(@themeColor, 20%);
  h1 {color: @themeColor;}
  p {background-color: @contrast;}
}

//use the mixin in the themes
body.themeBlue {
  @themeColor: blue;
  .mainThemeDependentCss();
}

body.themeRed {
  @themeColor: red;
  .mainThemeDependentCss();
}

CSS输出

body.themeBlue h1 {
  color: #0000ff;
}
body.themeBlue p {
  background-color: #6666ff;
}
body.themeRed h1 {
  color: #ff0000;
}
body.themeRed p {
  background-color: #ff6666;
}

对于其他一些涉及主题方面或方法的答案，请参阅：

Answer 2

Less中的变量实际上是常量，只能定义一次。

Scope在其代码括号内工作，因此您需要将CSS嵌套在所需的每个主题中（这意味着重复）。

这并不理想，因为您需要这样做：

body.themeBlue {
  @color: blue;
  /* your css here */
}

body.themeRed {
  @color: red;
  /* your css here AGAIN :( */
}

但是，您可以尝试使用这样的变量：

@color: black;
@colorRed: red;
@colorBlue: blue;

h1 {
  color: @color; // black
  body.themeRed & {
    color: @colorRed; // red
  }
  body.themeBlue & {
    color: @colorBlue; // blue
  }
}

你只需要声明一次颜色，但是你需要经常使用“body.themeRed”等前缀，颜色因主题而异。

Answer 3

您实际上可以使用@import加载主题！因此，common.less将包含您的所有默认样式，并且@themeColor将被应用到其中。

.mainThemeDependentCss() {
  //file with all themed styles
  @import 'common.less';
}

//use the mixin in the themes
body.themeBlue {
  @themeColor: blue;
  .mainThemeDependentCss();
}

body.themeRed {
  @themeColor: red;
  .mainThemeDependentCss();
}

顺便说一句，您应该避免在body中使用common.less选择器，因为它不起作用。

基于CSS类的LESS条件设置LESS变量

3 个答案: