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?
解决方法
看到我的答案在这里:
Problems with arguments in CSS mixins (using LESS)
.transition (@value1,@value2:X,...) { @value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g,'')`; -webkit-transition: @value; -moz-transition: @value; -ms-transition: @value; -o-transition: @value; transition: @value; }