.movable {
transition-property: top,left;
transition-duration: 0.2s;
transition-timing-function: ease;
}
.fadeAndStretchable {
transition-property: opacity,width,height,margin;
transition-duration: 1.5s;
transition-timing-function: ease-out;
}
(注意：为了简洁起见，我已经省略了-webkit，-moz和-o属性：实际上，这些规则中的每一个都是12行长，而不是3)
请注意，transition-property的值是逗号分隔的。这在CSS中是不寻常的：多个值通常是空格分隔的(如在边框中：1px solid#f00)。 LESS mixins可以使用特殊的@arguments值为produce a space-separated list of all the mixin arguments – 但是可以定义一个LESS mixin，它可以使用可变数量的参数，并将它们转换成逗号分隔的值列表，适用于转换属性？
如果需要，我很满意一个需要两个混合的解决方案：一个用于转换属性，另一个用于转换持续时间和转换时序功能。这是我迄今为止所尝试过的
尝试1：使用带有未命名参数的@arguments
.transition-property() {
-webkit-transition-property: @arguments;
-moz-transition-property: @arguments;
-o-transition-property: @arguments;
transition-property: @arguments;
}
.movable {
.transition-property(top,left);
}
结果：LESS错误(“没有找到匹配定义’.transition-property(top，left)’”)
尝试2：使用带有命名参数的@arguments
.transition-property(@p1,@p2,@p3,@p4,@p5) {
-webkit-transition-property: @arguments;
-moz-transition-property: @arguments;
-o-transition-property: @arguments;
transition-property: @arguments;
}
.movable {
.transition-property(top,left);
}
结果：LESS错误(“没有找到匹配定义’.transition-property(top，left)’”)
尝试3：使用带有虚拟默认值的命名参数
.transition-property(@p1:p1,@p2:p2,@p3:p3,@p4:p4,@p5:p5) {
-webkit-transition-property: @p1,@p5;
-moz-transition-property: @p1,@p5;
-o-transition-property: @p1,@p5;
transition-property: @p1,@p5;
}
.movable {
.transition-property(top,left);
}
结果：没有LESS错误，但是它会生成CSS规则-webkit-transition-property：top，left，p3，p4，p5，因为浏览器因为无法识别的属性而忽略。
我已经尝试了各种其他方法(例如，将属性作为字符串“顶部，左侧”传递)，但都会导致相同的事情：LESS错误或无效的CSS。
有没有办法呢？或者我必须咬住子弹，并定义一套超自然的混合物，例如
.transition-property(@p1) {...}
.transition-property(@p1,@p2) {...}
.transition-property(@p1,@p3) {...}
.transition-property(@p1,@p4) {...}
etc.
解决方法
> …允许变量参数
> JavaScript evaluation的反铲
>变量string interpolation
> A〜前缀到escape的结果表达式(即将LESS封闭在字符串中)
>好老regular expressions
唷。这是结果mixin：
.transition-properties(...) {
-webkit-transition-property: ~`"@{arguments}".replace(/[\[\]]/g,'')`;
}
这是完整的版本，具有完整的浏览器扩展：
.transition-properties(...) {
@props: ~`"@{arguments}".replace(/[\[\]]/g,'')`;
-webkit-transition-property: @props;
-moz-transition-property: @props;
-o-transition-property: @props;
transition-property: @props;
}
