根据CSS类的LESS条件设置LESS变量 [英] LESS condition based on CSS class to set a LESS variable

问题描述

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

I need to set a Less variable to match the website's active theme, ie, each theme has a different color.

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

I'd like to set @themeColor to the right color, based on the HTML's body CSS class that defines the theme.

例如:

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

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

This way I'd only need to use the @themeColor variable inside the other Less files.

任何人都可以帮忙吗? 据此( http://www.lesscss.org/#-scope )，这是可能的做这样的事情，但我不能使它工作.这是怎么回事?

Can anyone help? According to this (http://www.lesscss.org/#-scope) it is possible to do something like that, but I can't make it work. what is going on here?

推荐答案

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

The LESS file cannot read the actual class applied to the html body element at run time (you would probably need to implement a javascript solution to do something like that).

如果您只想基于body类准备使用所有主题的CSS，则最好的实现方法是在mixin中具有所有必要的基于主题的CSS，然后将其应用于主题类.这样可以减少代码重复.例如:

If you just want to have all themed css ready for use based on the body class, the best way to implement this to have all the necessary theme based css in a mixin, then apply it under the theme classes. This reduces code duplication. For example:

很少

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

有关主题主题方面或方式的其他答案，请参见:

For some other answers that deal with aspects or ways of theming, see:

• 少CSS-根据主体类别更改主题颜色的变量值
• LESS.css变量(取决于类)
• 缺少CSS:滥用&嵌套时是运算符?

• 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?

这篇关于根据CSS类的LESS条件设置LESS变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！