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;
}

......这显然不起作用。有没有什么好方法可以进行双重插值＆＃39;？

Answer 1

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

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

Answer 2

注意：您的答案中使用的替代方法看起来更清洁，更好。它可能会进一步改进，但这超出了这个答案的范围。我发布此答案只是为了显示相关代码的错误。

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

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

LESS嵌套插值

2 个答案: