Less 在mixin中，多个属性被视为单独的参数

我试图编写一个mixin，但我似乎无法让参数按我想要的方式工作：多个属性被视为一个单独的参数

现行代码 期望输出 实际产量

---

有什么想法吗？

我建议使用LESS的转义功能，即：

a:link, a:visited { 
    color: green;
    opacity: .5;
    font-size: 1em;
}

a:hover {
    color: red;
    opacity: 1;
    font-size: 2em;
    .transition(e("font-size, color"));
}

尽管LESS似乎接受了这一点，但它只会对发送的逗号分隔字符串中的最后一个属性设置动画。很遗憾。

使用找到的解决方案可以处理一个和多个参数：

.transition (@value1,@value2:X,...)
{
    @value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;

    -webkit-transition: @value;
    -moz-transition: @value;
    -ms-transition: @value;
    -o-transition: @value;
    transition: @value;
}

以这种方式使用它：

.transition(color, opacity .5s ease-in-out);

收益率：

-webkit-transition: color, opacity .5s ease-in-out;
-moz-transition: color, opacity .5s ease-in-out;
-ms-transition: color, opacity .5s ease-in-out;
-o-transition: color, opacity .5s ease-in-outt;
transition: color, opacity .5s ease-in-out;

---

如果要将逗号分隔列表作为参数传递给mixin，只需使用分号分隔参数即可

下面的代码根据需要与您定义的mixin一起工作：

a {
    .transition(color, opacity; .5s);
}

---

较少的mixin能够使用分号分隔的参数（以及逗号分隔的参数）

如果在调用mixin时参数列表中存在分号，则分号之间的所有内容都将被视为参数，即使这些内容中有逗号。这允许您将逗号分隔的列表作为一个参数传递。如果分号不存在，它会将逗号视为参数分隔符

.transition(@property: all; @time: 1s; @timing: ease-in-out) { // NOTE THE SEMICOLONS
    transition: @property @time @timing;
}

a {
    .transition(color,opacity; .5s); // SEMICOLON AFTER 'opacity'
}
b {
    .transition(color,opacity, .5s); // COMMA INSTEAD
}

输出：

a {
    transition: color,opacity .5s ease-in-out;
}
b { 
    transition: color opacity .5s; // invalid syntax
}

b {
    transition: color,opacity 1s ease-in-out; // 'color,opacity' is the first argument
}
i {
    transition: color opacity ease-in-out; // 'color' is 1st arg, 'opacity' is 2nd arg
}

请注意，shorthand

transition

属性的列表必须是单个转换的逗号分隔列表。因此，

b

有一个无效值，

a

有两个转换，其中未指定的值默认为其初始值：

color 0s/0s

不透明度。5s易入易出0s

这可能不是你想要的。（看起来您需要的是

颜色。5s缓进0s

和

不透明度。5s缓进0s

）

---

现在您可能想知道，“当没有其他参数时，如何将逗号分隔的列表作为单个参数传递？”只需在列表末尾附加一个伪分号即可

.transition(@property: all; @time: 1s; @timing: ease-in-out) {
    transition: @property @time @timing;
}

b {
    .transition(color,opacity;); // DUMMY SEMICOLON AFTER ARGUMENT
}
i {
    .transition(color,opacity); // MISSING SEMICOLON
}

输出：

a {
    transition: color,opacity .5s ease-in-out;
}
b { 
    transition: color opacity .5s; // invalid syntax
}

b {
    transition: color,opacity 1s ease-in-out; // 'color,opacity' is the first argument
}
i {
    transition: color opacity ease-in-out; // 'color' is 1st arg, 'opacity' is 2nd arg
}

同样，

i

的语法无效，

b

有两个转换：

color 0s/0s

opacity 1s易入易出0s

---

谢谢！它为我生成所有属性（与您的示例唯一不同的是我将转换mixin放在“a”中）。谢谢Chris。刚刚遇到这个问题（多个属性），您的解决方案工作得非常好！我尝试使用上面的多变量解决方案，但是因为我使用wp-less来处理WordPress主题设置中的变量，所以尝试计算

@value:~`{arguments}时抛出了一个错误但这是完美的！感谢不要忘记在mixin中的@property后面添加逗号查看我的答案以获得一个干净的解决方案，该解决方案基于向mixin传递参数的不太可选的语法。请注意，我认为您想要的输出语法不是您想要的。
transition
速记属性必须是完整的单个转换的逗号分隔列表。谢谢你，我已经找了一段时间了！不能说我完全理解它（X只是一个无意义的字符，如果它默认的话，以后会被去掉？），但它工作得很好。我对这个解决方案有问题，它只有在使用逗号的情况下才工作得很好。如果没有逗号，结果是这样的过渡：全部，500毫秒输入输出，100毫秒；对于.transition（所有500毫秒输入输出100毫秒）@Robert:刚刚在VS2013中使用WebEssentials 2013在lesstester.com和jsfiddle.net上进行了尝试-一切正常。看到它在这里工作了吗：jsfiddle.net/dMk23 Edit：这也发生在我身上——在jsfiddle中点击“整理”之后。重新格式化在
\sX/g
-前面添加了一个空格，这会将其打断。检查你是否也发生了这种情况。这是我的错：我没有相同的参数，我有（…）而不是你的。感谢您的建议：）遗憾的是，这不能用LESSHPCompilerWorks编译，很好，谢谢。但不能使用自定义函数，如.transition value（…）{transition:@arguments}酷！我猜这是一个较新的功能。@OscarBroman取决于你如何定义“最近的”。它至少从2013年就出现了；请参阅Michael Ryback的答案。
b {
    transition: color,opacity 1s ease-in-out; // 'color,opacity' is the first argument
}
i {
    transition: color opacity ease-in-out; // 'color' is 1st arg, 'opacity' is 2nd arg
}