Css 少嵌套插值

我试图生成一个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();

然而，我在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;
}

---

…这显然不起作用。有什么好方法可以得到“双插值”吗？

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

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

注意：在我看来，你的回答中使用的替代方法更清晰、更好。它可能会进一步改进，但这超出了这个答案的范围。我发布这个答案只是为了说明问题代码的错误

正如我在评论中提到的，选择器或属性插值的标准语法是@{}。只有当遇到这种语法时，编译器才会意识到它必须计算具有相同名称的变量并替换其值。对于以下声明：

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

以下是编译器将执行的步骤：

一旦遇到@{theme name}，它就知道变量的值应该放在那里，因此用粉彩、古董或hipster替换它。 现在我们可以假设编译器将上述语句视为~'@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();

---

您需要像~'@{theme name}-background}一样使用它，而不是~'@{theme name}-background'。如果没有第二组{}，@{theme name}将被编译器识别为一个变量，并将被值替换，但其余的@at start和-background在其末尾只是字符串连接。编译器不会对变量进行进一步求值，因为没有人告诉它这样做。因此，您只能获得@pastel background等输出。也就是说，您的解决方案看起来比所讨论的代码片段更干净。@Harry如果您想将您的评论作为答案发布，我将很乐意选择它作为正确的答案。虽然我最终将我的less重构为我的解决方案的格式，但您的回答确实提供了一种进行嵌套插值的方法，并且回答了最初的询问。当然可以。我现在不在电脑旁。一两个小时就可以了。

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