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, @duration, @prop2, @dur2, @prop3, @dur3){...}
是否有更健壮和简洁的方式来定义过渡混合,以接受可变数量的参数并构造适当的过渡CSS?
上下文: 有时我想在多个属性上过渡;例如,:hover可能会触发背景颜色,框阴影,文本颜色等的过渡…
:hover
在这里查看我的答案:混合属性中多个属性被视为单独的参数
摘要:使用此mixin来获取可变数量的参数:
.transition (@value1,@value2:X,...) { @value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`; -webkit-transition: @value; -moz-transition: @value; -ms-transition: @value; -o-transition: @value; transition: @value; }