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

Question

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

我想基于HTML定义主题的body CSS类将@themeColor设置为正确的颜色.

例如:

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

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

有人可以帮忙吗？根据这个(http://www.lesscss.org/#-scope),可以做类似的事情,但我不能让它发挥作用.这里发生了什么？

Answer 1

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

如果你只想根据body类使用所有主题css ,那么实现它的最佳方法是在mixin中包含所有必需的基于主题的css,然后在主题类下应用它.这减少了代码重复.例如:

减

//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;
}

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

• LESS CSS - 根据body类更改主题颜色的变量值
• LESS.css变量取决于类
• 较少CSS:嵌套时滥用&Operator？