LESS CSS - 根据主体类别更改主题颜色的变量值

Question

在这里掌握LESS，但有一点仍不清楚。

可以说我的网站有多个颜色主题，由body标签上的一个类控制。从这我可以重新定义每个主题内的每个元素的各种颜色。如果我有很多元素需要改变，以及很多主题，那么容易但相当耗时。每当我添加一个新的主题时，我都需要用不同的颜色值再次写出所有的选择器。

我立足我到目前为止在另一篇文章中，我发现工作： LESS.css variable depending on class

...但是它似乎仍然对我想在做什么，我还是得过于复杂，以写出所有的选择和在与颜色变量放入同一个CSS之前包含mixin。

我创建了一个CODEPEN HERE

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

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

Answer 1

假设你仍然有希望的主题是一个样式表（而不是多张作为cimmanon在评论中指出），并假设在你使用LESS 1.3。 2+，那么以下代码通过设置需要主题更改的类的循环来减少重复数量。

请注意，这对Codepen不起作用（它引发了错误uncaught throw #，可能是因为它们运行的​​是较早版本的LESS），但您可以通过将代码放入LESS's compiler来正确编译。

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