LESS CSS - 根据身体类主题颜色更改变量的值(LESS CSS - Change vari

掌握此较少，但有一件事交手还是有点不清楚。

可以说，我有我的网站，通过在body标签一类控制的多个颜色主题。从这个我可以重新定义各种颜色为每个主题中的每个元素。很容易，但如果我有很多的元素来改变......和很多的主题相当耗时。我每次添加一个新的主题，我需要重新编写了所有的选择，用不同的颜色值。

我立足我到目前为止在另一篇文章的工作，我发现：依班LESS.css变量

......然而它仍然似乎是我想要做的，我还是写出来，所有的选择，包括在相同的CSS与颜色可变下探前混入过于复杂。

我创建了一个CODEPEN HERE

我会很感激，如果任何人有时间去看看小和告诉我我怎么可能不同处理这个或我怎么能简化这一过程。

非常感谢的人谁帮助了:)

假设你保持与想要主题它内的一个样式表（而不是多张作为cimmanon在评论中所指出），并且假设使用的是LESS 1.3.2+，则下面的代码工作通过设置以减少重复的量通过需主题更改类的循环。

请注意，这不会对Codepen工作（它抛出一个错误uncaught throw # ，也许是因为他们正在运行以下的早期版本），但你可以看到它通过将代码放到正确编译LESS的编译器。

LESS（基于关闭您Codepen代码与演示添加的主题）

//////////////////////////////////////////////////////
// CONSTANTS

@lightColour: #fff;
@darkColour: #000;
@lightBg: #fff;
@darkBg: #000;
@numberOfThemes: 3; //controls theme loop

//////////////////////////////////////////////////////
// MIXINS

//Theme Definitions by parametric mixin numbers (1), (2), etc.
.themeDefs(1) {
  @lightColour: #f00;
  @darkColour: #fff;
  @lightBg: #f00;
  @darkBg: #fff;
}

.themeDefs(2) {
  //inverse of 1
  @lightColour: #fff;
  @darkColour: #f00;
  @lightBg: #fff;
  @darkBg: #f00;
}

.themeDefs(3) {
  @lightColour: #cfc;
  @darkColour: #363;
  @lightBg: #cfc;
  @darkBg: #363;
}


.curvy {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

//////////////////////////////////////////////////////
// GENERAL STYLING

* {padding: 0;margin: 0;}
html {text-align: center;}
h2 {padding: 20px 0;}

.box {
  .curvy;
  color: @lightColour;
  background: @darkBg;
  display:inline-block; width:10%; padding:20px 5%; margin:0 1% 20px 1%;
}

//////////////////////////////////////////////////////
// THEME BUILDING

.buildThemes(@index) when (@index < @numberOfThemes + 1) {

  .theme-@{index} {
      .themeDefs(@index); 
      color: @lightColour;
      background: @darkBg; 

      .box {
        color: @darkColour;
        background: @lightBg;
      }
    }
    .buildThemes(@index + 1);
}
//stop loop
.buildThemes(@index) {}
//start theme building loop
.buildThemes(1);

CSS输出（只显示为简洁的循环主题CSS）

.theme-1 {
  color: #ff0000;
  background: #ffffff;
}
.theme-1 .box {
  color: #ffffff;
  background: #ff0000;
}
.theme-2 {
  color: #ffffff;
  background: #ff0000;
}
.theme-2 .box {
  color: #ff0000;
  background: #ffffff;
}
.theme-3 {
  color: #ccffcc;
  background: #336633;
}
.theme-3 .box {
  color: #336633;
  background: #ccffcc;
}