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