少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;
}

原文地址：https://www.jb51.cc/css/220172.html