14

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

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

例如：

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

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

任何人都可以帮忙吗？根据这个（http://www.lesscss.org/#-scope）可以做类似的事情，但我不能让它工作。这里发生了什么？

4

3 回答 3

23

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

有关处理主题方面或方式的其他一些答案，请参阅：

于 2013-03-12T17:56:02.263 回答
3

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”等前缀，其中颜色因主题而异。

于 2013-03-12T17:27:05.813 回答
1

您实际上可以使用@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，因为它不起作用。

于 2019-06-05T15:01:09.647 回答