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

【问题标题】：LESS condition based on CSS class to set a LESS variable基于 CSS 类的 LESS 条件设置 LESS 变量
【发布时间】：2013-02-28 06:45:45
【问题描述】：

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

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

例如：

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

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

有人可以帮忙吗？根据这个（http://www.lesscss.org/#-scope），可以做类似的事情，但我不能让它工作。这是怎么回事？

【问题讨论】：

除非您在客户端处理较少的文件，否则这是不可能的，因为较少的文件将在服务器端编译。
感谢您的回答。我没想到。

标签： less

【解决方案1】：

Less 中的变量实际上是常量，只会被定义一次。

作用域在其代码大括号内工作，因此您需要将 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”等前缀，其中颜色因主题而异。

【讨论】：

我试图编写更少的代码而不必复制任何内容，但似乎我做不到。 :/ 谢谢你的回答。

【解决方案2】：

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

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

【讨论】：

非常感谢，它有效！这将允许我编写更少的代码。我不想在整个模板中重复 5 次代码。
是的，LESS 和其他预处理器的重点是“减少”代码重复。
Mabbe 最好将@themeColor 作为 mixin 参数传递？
有没有办法让你的@themeColor 变量全局化？我相信，它仅限于你的 mixin 的范围，这意味着你想要应用你的 @themeColor 的任何元素都需要在 mixin 中。理想情况下，我们可以在 mixin 之外应用 @themeColor。这可能吗？
@MichaelLynch：如果整个文件只需要一个值，它可以是全局的。上面的代码创建了不同的值基于body class，所以变量都在那个body class调用的范围内。如果您使用上面的代码设置了一个全局值，那么.themeBlue 和.themeRed 将匹配值 为@themeColor（不可取）。我将主题颜色依赖项封装到.mainThemeDependentCss() mixin 中，这样每个类只需要编码一次。如果不同的 CSS 文件 处理 body 类更改（可能在之后合并），则可以使用全局值。

【解决方案3】：

您实际上可以使用@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();
}

顺便说一句，您应该避免在common.less 中使用body 选择器，因为它不起作用。

【讨论】：