如何在Less mixin中循环遍历所有参数

Question

我正在写一个Less mixin。

我希望能够传递mixin几个参数。 第一个是字符串。 其余的（无数个）参数将是值对。

在我的mixin中，如何遍历无限数量的参数？

例如，有一次我会打电话给...

.my-mixin(@name, @foo: bar, @hello: world);

还有一次

.my-mixin(@name, @iam: cool, @youare: lame, @someoneis: awesome);

如果不太支持JS / PHP，这就是它的样子。

.my-mixin() {
    @name: @arguments[0]; //First param

    for (@arguments as @label => @value) {
        @label: @value;
    }
}

这可能吗？

Answer 1

实际上，您会问两个问题。 首先是如何创建可以接受无数个参数的混合，其次是由谁来遍历参数的列表/数组。

Less具有特殊的...语法来创建带有无数个参数的mixin。 官方文档可以在这里找到： 高级参数和@rest变量 。 我可以定义一个LESS mixin以生成具有可变数量参数的过渡属性吗？ 。

通过在...之前添加变量名称，可以使用特殊的...语法将参数列表分配给变量：

.mixin(@parameter1, @endlesslistofparameters...) {}

@endlesslistofparameters变量现在包含一个参数列表，您可以使用Less列表函数从该列表中提取一个值（或找到其长度）： length()返回列表的长度，而extract(@list,position)返回列表中某个位置的值。 请注意，第一个值在位置1而不是0 。

最后，您可以使用循环来遍历此参数列表。

在Less中，mixin可以自称。 当与Guard表达式和模式匹配结合使用时，此类递归mixin可用于创建各种迭代/循环结构。

另请参阅： 在LESS中循环遍历一组名称/值对

总之，我认为您可以编写如下所示的内容：

.my-mixin(@name,@properties...) {
.setproperties(@iterator:1) when (@iterator <= length(@properties)) {
@propertyname: extract(extract(@properties,@iterator),1);
@{propertyname}: extract(extract(@properties,@iterator),2);
.setproperties((@iterator + 1));
}
.@{name} {
.setproperties();
}
}

.my-mixin(jared; iam cool, youare lame, someoneis awesome);

前面的Less代码将编译为以下CSS代码：

.jared {
  iam: cool;
  youare: lame;
  someoneis: awesome;
}

而且还要注意，从1.7版开始，Less允许您将规则集传递给Mixins ，这使您可以编写：

.my-mixin2(@name,@properties) {
.@{name} {
@properties();
}
}
.my-mixin2(jared; {iam: cool; youare: lame; someoneis: awesome;});