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

Question

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

我想根据定义主题的 HTML 主体 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，然后在主题类下应用它。这减少了代码重复。例如:

减

//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 - Change variable value for theme colors depending on body class

LESS.css variable depending on class

LESS CSS: abusing the & Operator when nesting?