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

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

MyClass

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

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

在需要的地方调用该混合：

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

请注意，属性以相反的顺序打印。

codepen上的完整代码。

已更新：

功能each很少，它可以完成所有的魔术工作（v3.7.0）：

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

所以打印所有规则的混合看起来像这样：

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

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

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

和用法：

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

在http://lesscss.org/less-preview/上尝试使用此代码

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

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

2 个答案: