Less 如何在较少的混合中循环所有参数

我在写一篇不那么混搭的文章

我希望能够传递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;
    }
}

---

这可能吗？事实上你问了两个问题。首先是如何创建一个可以接受无数参数的mixin，其次是谁来迭代参数列表/数组

Less具有特殊的

…

语法，用于创建具有无数参数的混合。官方文件可在此处找到：。有关示例/用例，请访问

特殊的

..

语法可用于通过在

..

之前添加变量名称，将参数列表分配给变量：

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

@endlesslistofparameters变量现在包含参数列表，您可以使用从该列表中提取值（或查找其长度）：

length（）

返回列表的长度，

提取（@list，position）

返回列表中某个位置的值。请注意，第一个值位于位置

1

，而不是

0

最后，您可以使用循环来迭代这个参数列表

在更少的情况下，mixin可以调用自己。这样的递归混合，当组合时 使用保护表达式和模式匹配，可以用于创建 各种迭代/循环结构

另见：

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

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

此外，请注意，从版本1.7开始，Less允许您编写：

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

请参阅，以及中的所有循环示例。其余部分（即循环体中的代码）取决于您需要如何将提供的值呈现给CSS

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