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();