LESS允许参数混合，例如：
.transition(@property, @duration){
transition: @property @duration;
-moz-transition: @property @duration; /* Firefox 4 */
-webkit-transition: @property @duration; /* Safari and Chrome */
-o-transition: @property @duration; /* Opera */
}
但是，这并不总是适用于过渡等属性。如果您尝试多次转换并尝试多次调用mixin，则最后一次mixin将覆盖所有先前定义的转换。那是因为用于定义多个转换的正确CSS3语法是：
... {
transition: @property1 @duration1, @property2 @duration2, ...;
}
我能想到将多个转换定义为mixin的唯一方法是重载mixin：
.transition(@property, @duration){...}
.transition(@property, @duration, @prop2, @dur2){...}
.transition(@property, @duration, @prop2, @dur2, @prop3, @dur3){...}
是否有更健壮，更简洁的方法来定义转换mixin以获取可变数量的参数并构造适当的转换CSS？
上下文：有时我想转换多个属性;例如，:hover可能触发背景颜色，盒阴影，文本颜色等的转换......
答案 0 :(得分：32)
请在此处查看我的回答：Multiple properties are getting treated as separate arguments in mixins
总结：将此mixin用于可变数量的参数：
.transition (@value1,@value2:X,...)
{
@value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
-webkit-transition: @value;
-moz-transition: @value;
-ms-transition: @value;
-o-transition: @value;
transition: @value;
}
答案 1 :(得分：21)
输出是相同的，但请注意使用分号而不是执行转义字符串，在较新版本的LESS中传递属性的方式不同：
@prop1: color;
@prop2: opacity;
@dur1: 3s;
@dur2: 4s;
.transition(@transString: 0) when not (@transString = 0) {
transition: @transString;
-moz-transition: @transString; /* Firefox 4 */
-webkit-transition: @transString; /* Safari and Chrome */
-o-transition: @transString; /* Opera */
}
.class1 {.transition();}
.class2 {.transition(width 2s, height 2s;);}
^
semicolon here
.class3 {.transition(@prop1 @dur1, @prop2 @dur2;);}
^
semicolon here
分号强制将逗号计算为列表分隔符而不是参数分隔符。
我们将正确的属性参数构建为transition的字符串，然后使用转义值（~）运算符将其转换为所需的专有语法。通过使用字符串插值（@{variableName}），我们甚至可以将变量嵌入到流程中，但实际输入必须采用转义字符串的形式。
LESS代码
@prop1: color;
@prop2: opacity;
@dur1: 3s;
@dur2: 4s;
.transition(@transString: 0) when not (@transString = 0) {
transition: @transString;
-moz-transition: @transString; /* Firefox 4 */
-webkit-transition: @transString; /* Safari and Chrome */
-o-transition: @transString; /* Opera */
}
.class1 {.transition();}
.class2 {.transition(~" width 2s, height 2s");}
.class3 {.transition(~" @{prop1} @{dur1}, @{prop2} @{dur2}");}
CSS输出
注意：不输出.class1因为保护表达式确保输入内容（尽管它不能防止不正确的输入）。
.class2 {
transition: width 2s, height 2s;
-moz-transition: width 2s, height 2s;
-webkit-transition: width 2s, height 2s;
-o-transition: width 2s, height 2s;
}
.class3 {
transition: color 3s, opacity 4s;
-moz-transition: color 3s, opacity 4s;
-webkit-transition: color 3s, opacity 4s;
-o-transition: color 3s, opacity 4s;
}
答案 2 :(得分：6)
在LESS中，您可以使用逗号或分号分隔参数。对于包含逗号的单个值，您可以使用分号终止该单个值，以便将列表作为单个值发送，如下所示：
.class {
.background-size(100%, auto;);
}
对于多个值，只需使用以下语法：
/* Example mixin */
.set-font-properties(@font-family, @size) {
font-family: @font-family;
font-size: @size;
}
/* Usage with comma-separated values */
.class {
.set-font-properties(Arial, sans-serif; 16px);
}
/* Output */
.class {
font-family: Arial, sans-serif;
font-size: 16px;
}
轻松自在！
答案 3 :(得分：4)
这应该有效，我想：
.transition(...) {
transition: @arguments;
-moz-transition: @arguments; /* Firefox 4 */
-webkit-transition: @arguments; /* Safari and Chrome */
-o-transition: @arguments; /* Opera */
}
... - 是一种有效的语法，不是要替换的东西。
答案 4 :(得分：4)
注意：此答案的添加不是为了说现有答案不正确或已过时。所有答案都是有效的，并且仍然有效。这个只是提供了一种不同的方法，在我看来，它更复杂，但在每个参数如何被提及为键值对方面也更灵活。
使用此方法的优点：当需要对值执行任何额外操作时，此方法会更有用（例如将unit添加为deg ，px或执行任何额外的数学运算等）或动态添加@property的供应商前缀。例如，有时您可能只希望将transform作为输入属性传递给mixin，但又希望为-webkit-transform和-webkit-transition添加-moz-transform -moz-transition 1}}等等。
在这个方法中，我们使用...特性，它允许我们将可变数量的参数传递给mixin，遍历传递的每个参数，extract属性的名称使用其他参数（如持续时间，旋转度等），然后使用Less提供的merge feature来连接为属性指定的值。
.transition(@args...){
.loop-args(@argCount) when (@argCount > 0) {
.loop-args(@argCount - 1);
@arg: extract(@args, @argCount);
@property: extract(@arg,1);
@duration: extract(@arg,2);
-webkit-transition+: @property @duration;
-moz-transition+: @property @duration;
-o-transition+: @property @duration;
transition+: @property @duration;
}
.loop-args(length(@args));
}
div{
.transition(background, 1s; border-color, 2s; color, 2s);
}
.transform(@args...){
.loop-args(@argCount) when (@argCount > 0) {
.loop-args(@argCount - 1);
@arg: extract(@args, @argCount);
@property: extract(@arg,1);
@param: extract(@arg,2);
-webkit-transform+_: ~"@{property}(@{param})";
-moz-transform+_: ~"@{property}(@{param})";
-o-transform+_: ~"@{property}(@{param})";
transform+_: ~"@{property}(@{param})";
}
.loop-args(length(@args));
}
div#div2{
.transform(rotate, 20deg; scale, 1.5; translateX, 10px);
}
编译时的上述代码将产生以下输出：
div {
-webkit-transition: background 1s, border-color 2s, color 2s;
-moz-transition: background 1s, border-color 2s, color 2s;
-o-transition: background 1s, border-color 2s, color 2s;
transition: background 1s, border-color 2s, color 2s;
}
div#div2 {
-webkit-transform: rotate(20deg) scale(1.5) translateX(10px);
-moz-transform: rotate(20deg) scale(1.5) translateX(10px);
-o-transform: rotate(20deg) scale(1.5) translateX(10px);
transform: rotate(20deg) scale(1.5) translateX(10px);
}
相关答案：
答案 5 :(得分：2)
从LESS 1.4开始，文档（http://lesscss.org/features/#mixins-parametric-feature-mixins-with-multiple-parameters）提出了处理此问题的正确方法：
使用逗号作为mixin分隔符，无法创建逗号 将列表分隔为参数。另一方面，如果是编译器 它在mixin调用或声明中至少看到一个分号 假设参数由分号和所有逗号分隔 属于css列表：
具体而言， mixin ：
.transition(@prop-or-props) {
-webkit-transition: @prop-or-props;
-moz-transition: @prop-or-props;
-o-transition: @prop-or-props;
transition: @prop-or-props;
}
用法：
.transition(opacity .2s, transform .3s, -webkit-transform .3s;);
请注意，多个属性以逗号分隔，并且尾部分号导致逗号分隔列表在mixin中被视为单个参数。
使用rest...参数定义mixin会更好，并且能够提取任意长度参数的每个元素以进行单独处理，但我想到的用例是添加供应商前缀转换转换（所以我可以简单地用.transition(opacity .2s, transform .3s)调用它并自动添加-webkit-transform位），或许这可以通过不同的实用程序更好地处理（例如gulp-autoprefixer）。