從字符串獲取較少變量值

Question

我正在嘗試創建一個切換主題的函數。當我將Less轉換爲CSS時，CSS文件將顯示字符串插值而不是變量值。變量文件看起來像：

@beach-font-color: #3d3d3d; 
@ocean-font-color: #d3d3d3; 

@theme: "beach"; 
@symbol: "@"; 

@currentTheme-font-color: ~"@{symbol}@{theme}-font-color"; 

在樣式表：

body { color: @currentTheme-font-color; } 

生成CSS生產：代替

body { color: @beach-font-color; } 

：

body { color: #3d3d3d; } 

有一件事我想到可能需要的是：

@font: ~"@{symbol}@{theme}-font-color"; 

@currentTheme-font-color: ~"@{font}"; 

但是，這只是產生相同的結果。

爲什麼Less編譯器使用字符串文字而不是變量值？

我將如何能夠得到變量的價值，沿着這些線？

Answer 1

（我不能跳過此不提供備選。因爲這就是我最喜歡血腥的錯更少模式「通過變量名串聯命名空間仿真」回答（不幸的是它也是流傳最廣的一個:(）。

而不是通過使用looong全局變量名稱來模擬名稱空間（大多數編程語言和範例中的doh＃1）自1970年代以來，全局變量被認爲是有害的...... :)，然後通過醜陋的連接語法來組裝這些變量名稱（doh＃2 ，~"@{@{@foo}}-@{bar}-seriously}?"），人們可以使用普通名稱空間，語法更清晰：

.theme(beach) { 
    @font-color: #3d3d3d; 
    // other beach variables 
} 
.theme(ocean) { 
    @font-color: #d3d3d3; 
    // other ocean variables 
} 

@theme: beach; 

.theme(@theme); 

body {color: @font-color} 

這僅僅是可能的變化之一（更多示例，請參閱：

• Dynamic Variable Names with Less - >gist
• How to thematize in lesscss
• 等）