少CSS:混合与可变数目的参数

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,@dur2,@prop3,@dur3){...}

有没有更强大和简洁的方式来定义转换混合以接受可变数量的参数和构造适当的转换CSS?

上下文:有时候我想转换多个属性;例如,a:hover可能会触发背景颜色,Box-shadow,文本颜色等的转换…

解决方法

看到我的答案在这里Problems with arguments in CSS mixins (using LESS)

摘要:对可变数量的参数使用此mixin:

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

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

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效