.transition(@1) {
-webkit-transition: @1;
-moz-transition: @1;
}
div {
.transition(all .5s);
}
上面的例子工作正常,但我也有这样的事情：
div {
-webkit-transition: border-color .3s,background .3s;
}
而且我不能将mixin称为.transition(border-color .3s,background .3s),因为它有更多的参数而不是mixin中定义的参数.所以我现在正在做的是：
.transition(@1) {
-webkit-transition: @1;
-moz-transition: @1;
}
.transition-2(@1,@2) {
-webkit-transition: @1,@2;
-moz-transition: @1,@2;
}
div {
.transition-2(border-color .3s,background .3s);
}
这很烦人,我需要在我使用之前以前没有使用的一些参数时在我的工作表中添加冗余代码;我也有其他CSS3属性的问题,例如当我需要在开头添加插入时的Box-shadow.
有没有办法用Less来声明mixins的参数个数是否灵活,就像CSS3属性一样？
解决方法
选项1 :(最简单的解决方案 – 得益于highlighting the miss的七阶段最大值)
我们可以使用分号作为参数的分隔符/分隔符,当我们在指定所有需要转换的属性(以逗号分隔格式)后在末尾添加分号时,之前的整个部分将被视为一个论点.
Extract from the 07001:
Using comma as mixin separator makes it impossible to create comma separated lists as an argument. On the other hand,if the compiler sees at least one semicolon inside mixin call or declaration,it assumes that arguments are separated by semicolons and all commas belong to css lists
.transition(@1) {
-webkit-transition: @1;
-moz-transition: @1;
}
div{
.transition(border-color .5s,background .3s,color .3s;);
}
所以编译时的上述代码会导致
div {
-webkit-transition: border-color 0.5s,background 0.3s,color 0.3s;
-moz-transition: border-color 0.5s,color 0.3s;
}
选项2：
将输入值传递给mixes(需要转换的特定属性的数量)在引号内.在mixin中,使用〜或e()内置函数来去除引号.
.transition(@1) {
-webkit-transition: ~"@{1}";
-moz-transition: ~"@{1}";
}
div {
.transition("border-color .5s,background .3s");
}
div#sample2 {
.transition("border-color .3s,color .3s");
}
将在编译时生成以下CSS
div {
-webkit-transition: border-color .5s,background .3s;
-moz-transition: border-color .5s,background .3s;
}
div#sample2 {
-webkit-transition: border-color .3s,color .3s;
-moz-transition: border-color .3s,color .3s;
}
选项3：
Less允许使用…选项创建允许/接受可变数量输入的mixin.因此,您可以使用与原始代码相同的mixin,方法是将…添加到输入变量并按原样调用它.
.transition(@args...) {
-webkit-transition: @args;
-moz-transition: @args;
}
div {
.transition(border-color .5s,background .3s);
}
以上将成功编译,但唯一的问题是它在编译时会产生以下输出.如您所见,问题是参数值是空格分隔而不是逗号分隔(因为它们应该是CSS正常工作).
div {
-webkit-transition: border-color 0.5s background 0.3s;
-moz-transition: border-color 0.5s background 0.3s;
}
当然,我们可以使用正则表达式编写复杂的替换函数,但这会使代码变得混乱.相反,我们可以使用循环和一些内置函数来实现所需的输出(如下所示).
.transition(@args...) {
.loop-args(@argCount) when (@argCount > 0) {
.loop-args(@argCount - 1);
@arg: extract(@args,@argCount);
-webkit-transition+: @arg;
-moz-transition+: @arg;
}
.loop-args(length(@args));
}
div {
.transition(border-color .5s,color .3s);
}
基本上我们正在做的是使用…接受多个参数作为mixin的输入,然后遍历每个参数并将其添加到CSS属性的值. +:(Less v1.5.0中引入的合并功能)用于生成逗号分隔输出.
编译时,会产生以下输出：
div {
-webkit-transition: border-color 0.5s,color 0.3s;
}
