css - 是否可以在 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);

我的版本无法编译 - 我找不到文档(官方的或其他的)，此刻我在黑暗中四处寻找。

这可能吗？或者有更好的方法吗？

Answer 1

您可以使用 less 列表来存储您想要的属性:

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

然后您可以创建将从列表中打印键值对的混合。函数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):

Bind the evaluation of a ruleset to each member of a list.

因此打印所有规则的 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/ 试试这个代码