LESS嵌套插值

Question

我正在嘗試生成一個包含多個主題定義的css文件，但我無法按照自己想要的方式編譯它。似乎我需要對獲得的值進行第二次插值，而且我不確定甚至有辦法實現我正在嘗試的。

---

這裏是我到目前爲止有：

@all-themes: pastel, antique, hipster; 

@pastel-background: #a7b3a5; 
@pastel-primary: #b4bdc0; 

@antique-background: #856357; 
@antique-primary: #eae3ea; 

@hipster-background: #1a2930; 
@hipster-primary: #f7ce3e; 

.generate-themes(@i:1) when (@i <= length(@all-themes)) { 
    @theme-name: extract(@all-themes, @i); 
    @background: ~'@@{theme-name}-background'; 
    @primary: ~'@@{theme-name}-primary'; 

    body.theme-@{theme-name} { 
     background-color: @background; 
     color: @primary; 
    } 

    // ... more definitions ... 

    .generate-themes(@i + 1); 
} 

// call the mixin 
.generate-themes(); 

---

我期待它產生如下：

body.theme-pastel { 
    background-color: #a7b3a5; 
    color: #b4bdc0; 
} 

body.theme-antique { 
    background-color: #856357; 
    color: #eae3ea; 
} 

body.theme-hipster { 
    background-color: #1a2930; 
    color: #f7ce3e; 
} 

---

不過，我進入我的CSS是這樣的：

body.theme-pastel { 
    background-color: @pastel-background; 
    color: @pastel-primary; 
} 

body.theme-antique { 
    background-color: @antique-background; 
    color: @antique-primary; 
} 

body.theme-hipster { 
    background-color: @hipster-background; 
    color: @hipster-primary; 
} 

......這顯然不起作用。有沒有什麼好的方法來獲得「雙重插值」？

Answer 1

注：在你的答案中使用的另一種方法看起來更清潔和更好的給我。它可能會進一步改善，但這超出了這個答案的範圍。我張貼這個答案只是爲了顯示有問題的代碼有問題。

正如我在我的評論中提到的，選擇器或屬性插值的標準語法是@{}。只有遇到這種語法，編譯器纔會意識到它必須評估具有相同名稱的變量並替換其值。對於下面的語句：

@background: ~'@@{theme-name}-background'; 

以下是具體步驟，編譯器將執行：

• 一旦遇到@{theme-name}，它知道變量的值應該放在那裏，所以用柔和或古董或時髦代替它。
• 現在我們可以假設編譯器將上述語句看作~'@pastel-background'。由於沒有進一步的包裝，編譯器將其視爲另一個字符串並保持原樣。

如果有另一種包裝（如~'@{pastel-background}'），編譯器會看到它尚未擁有被評估的另一變量，尋找名爲pastel-background變量和使用它的價值。

@all-themes: pastel, antique, hipster; 

@pastel-background: #a7b3a5; 
@pastel-primary: #b4bdc0; 

@antique-background: #856357; 
@antique-primary: #eae3ea; 

@hipster-background: #1a2930; 
@hipster-primary: #f7ce3e; 

.generate-themes(@i:1) when (@i <= length(@all-themes)) { 
    @theme-name: extract(@all-themes, @i); 
    @background: ~'@{@{theme-name}-background}'; 
    @primary: ~'@{@{theme-name}-primary}'; 

    body.theme-@{theme-name} { 
     background-color: @background; 
     color: @primary; 
    } 

    // ... more definitions ... 

    .generate-themes(@i + 1); 
} 

// call the mixin 
.generate-themes(); 

Answer 2

我找到了一個解決辦法，除非有人能提供更好的解決方案：

@pastel-theme: #a7b3a5, #b4bdc0; 
@antique-theme: #856357, #eae3ea; 
@hipster-theme: #1a2930, #f7ce3e; 

@all-themes: pastel @pastel-theme, antique @antique-theme, hipster @hipster-theme; 

.generate-themes(@i:1) when (@i <= length(@all-themes)) { 
    @theme-pair: extract(@all-themes, @i); 
    @theme-name: extract(@theme-pair, 1); 
    @theme-def: extract(@theme-pair, 2); 
    @background: extract(@theme-def, 1); 
    @primary: extract(@theme-def, 2); 

    body.theme-@{theme-name} { 
     background-color: @background; 
     color: @primary; 
    } 

    // ... more definitions ... 

    .generate-themes(@i + 1); 
} 

// call the mixin 
.generate-themes();