如何在lesscss中進行主題化

Question

由於我正處於開發應用程序的預生產週期，因此我經常更改視覺以便與客戶驗證的內容銜接。

同一頁面的某些視覺效果（稱爲主題）將會很有趣，以便我可以將它們快速呈現給客戶。

我發現的方法是創建一個我放在身體上的外觀類，並通過更改它，我可以相應地更改頁面本身。

此說，我很感興趣，thematizing全球變化較少，如如下：

// default appearance 
@navBarHeight: 50px; 

.appearanceWhite { 
    @navBarHeight: 130px; 
} 
.appearanceBlack { 
    @navBarHeight: 70px; 
} 

這樣，以後在.LESS，我拿出類如下：

#navBar { 
    height: @navBarHeight; 

    // appearance handling 
    .appearanceBlack & { 
     background-color: black; 
    } 
    .appearanceWhite & { 
     background-color: white; 
    } 
} 

當然，實際情況如果更復雜。

是否可以根據外觀CSS類定義（或重新定義）較少的變量？

Answer 1

這一切都取決於有多少款式和變量之間的主題不同，例如一個（非常）基本的起始點可能是這樣的：

@themes: 
    blue rgb(41, 128, 185), 
    marine rgb(22, 160, 133), 
    green rgb(39, 174, 96), 
    orange rgb(211, 84, 0), 
    red rgb(192, 57, 43), 
    purple rgb(142, 68, 173); 

// usage: 

#navBar { 
    .themed(background-color); 
} 

// implementation: 

@import "for" ; 

.themed(@property) { 
    .for(@themes); .-each(@theme) { 
     @name: extract(@theme, 1); 
     @color: extract(@theme, 2); 

     .theme-@{name} & { 
      @{property}: @color; 
     } 
    } 
} 

的東西像 Pattern Matching， Ruleset Arguments，等等，等等

然後你可以得到自動生成任何複雜的外觀/主題化層次的...

舉例來說幾乎是相同的簡單的例子，但更多的定製方式：

// usage: 

#navBar { 
    .themed({ 
     color:   @fore-color; 
     background-color: @back-color; 
    }); 
} 

// themes: 

.theme(@name: green) { 
    @fore-color: green; 
    @back-color: spin(@fore-color, 180); 
    .apply(); 
} 

.theme(@name: blue) { 
    @fore-color: blue; 
    @back-color: (#fff - @fore-color); 
    .apply(); 
} 

.theme(@name: black-and-white) { 
    @fore-color: black; 
    @back-color: white; 
    .apply(); 
} 

// etc. 

// implementation: 

.themed(@style) { 
    .theme(); .apply() { 
     .theme-@{name} & { 
      @style(); 
     } 
    } 
}