基于CSS类更低的条件来设置变化较少(LESS condition based on CSS cla

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

我想@themeColor设置为正确的颜色，基于HTML的身体CSS类定义的主题。

例如：

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

这样，我只需要使用其他较少文件内@themeColor变量。

任何人都可以帮忙吗？根据这一（ http://www.lesscss.org/#-scope ）就可以做这样的事情，但我不能使它发挥作用。这里发生了什么？

Answer 1:

少文件无法读取应用到HTML中的实际类body在运行时元（你可能需要实现一个JavaScript的解决方案，做这样的事情）。

如果你只是想将所有主题的CSS准备基础上，利用body类，最好的方式来实现这在一个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 -根据身体类主题颜色更改变量的值
LESS.css取决于类变量
LESS CSS：嵌套时滥用和运营商？

Answer 2:

欠变量实际上是常量，将只定义一次。

适用范围适用其代码括号内，所以你需要嵌套你的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”里的颜色取决于主题等前缀。

文章来源: LESS condition based on CSS class to set a LESS variable