Question

我正在写一个Less mixin。

我希望能够传递mixin几个参数。第一个是字符串。剩下的，无数个参数，都是值对。

在我的mixin中，如何循环遍历无数个参数？

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

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

又一次...

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

如果Less支持JS / PHP，那么它会是什么样子......

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

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

这可能吗？

Answer 1

实际上你问了两个问题。首先，如何创建一个可以接受无数个参数的mixin，其次是迭代参数列表/数组的人。

使用特殊...语法创建具有无数参数的mixins。官方文档可以在这里找到：Advanced arguments and the @rest variable。可以在Can I define a LESS mixin to generate a transition-property with a variable number of parameters?找到示例/用例。

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

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

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

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

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

另请参阅：Loop over an array of name value pairs in 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;
}

并且还注意到Less允许你从版本1.7开始Passing Rulesets to Mixins，这使你可以写：

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

如何循环使用Less mixin中的所有参数

1 个答案: