LESS中是否可以对分离的规则集使用插值？

Question

假设我有如下的规则集:

@h1-ruleset: {
    font-family: @raleway;
    font-weight: @raleway-light;
};

我想创建一个Mixin，类似于这样的东西：

：

.md-font(@ts) {
    @rs: ~"@{ts}-ruleset()";

    &--@{ts} {
        @rs; // or @@rs or @rs()
    }
}

然后这样调用它：

.md-font(h1);

我的版本无法编译-我找不到官方或非官方的文档，目前我正在摸索中。

这种情况可能发生吗？还是有更好的方法？

- John Ohara

Answer 1

您可以使用较少的列表来存储所需的属性：

@h1-ruleset: 
    font-family: @raleway;
    font-weight: @raleway-light;

然后您可以创建一个mixin，该mixin将从列表中打印键值对。函数extract按索引返回列表中指定位置的值。

.print-rules(@rules, @index) when (@index > 0) {
    @rule: extract(@rules, @index); // @rule is `font-family: @raleway`
    @rule-key: extract(@rule, 1);   // `font-family`
    @rule-value: extract(@rule, 2); // `@raleway`

    @{rule-key}: @rule-value;

    .print-rules(@rules, @index - 1);
}

在想要的位置调用此mixin：

h1 {
  .print-rules(@h1-ruleset, length(@h1-ruleset));
}

请注意，属性是按相反的顺序打印的。 codepen上有完整代码。

---

更新：

现在有一个名为each的函数完成所有魔法（从v3.7.0开始）：

将规则集的评估绑定到列表的每个成员。

因此打印所有规则的Mixin可能看起来像这样：

.print-rules(@rules) {
  each(@rules, .(@v, @k, @i) {
    @{k}: @v;
  });
}

规则集可以存储在mixin中而不是变量中：

.h1-ruleset() {
  font-family: Arial;
  font-weight: 400;
}

使用方法：

h1 {
  .print-rules(.h1-ruleset());
}

在http://lesscss.org/less-preview/尝试此代码。

- 3rdthemagical

---

这看起来很棒，但我使用Web Essentials有版本限制。 - John Ohara

Answer 2

"

“分离的规则集”并不是你想要的正确工具。你只需要使用带有你的“插值前缀”作为参数的简单混合即可。例如：

"

.ruleset(h1) {
    font-family: @raleway;
    font-weight: @raleway-light;
}

.ruleset(h2) {
    font-family: @voodoo;
    font-weight: @voodoo-light;
}

// etc.
// .......

.md-font(@ts) {
    &--@{ts} {
        .ruleset(@ts);
    }
}

.foo {
   .md-font(h1);
}

- seven-phases-max