18

我正在尝试编写一个 mixin，但我似乎无法让参数按我想要的方式工作：多个属性被视为一个单独的参数。

当前代码

.transition(@property: all, @time: 1s, @timing: ease-in-out) {
    -moz-transition: @property @time @timing;
    -webkit-transition: @property @time @timing;
    -o-transition: @property @time @timing;
    transition: @property @time @timing;
}

a {
    .transition(color, opacity, .5s);
}

期望的输出

a {
    -moz-transition: color, opacity .5s ease-in-out;
    -webkit-transition: color, opacity .5s ease-in-out;
    -o-transition: color, opacity .5s ease-in-out;
    transition: color, opacity .5s ease-in-out; 
}

实际输出

a {
    -moz-transition: color opacity .5s;
    -webkit-transition: color opacity .5s;
    -o-transition: color opacity .5s;
    transition: color opacity .5s;  
}

有任何想法吗？

4

4 回答 4

37

我建议使用LESS的转义功能，即：

a:link, a:visited { 
    color: green;
    opacity: .5;
    font-size: 1em;
}

a:hover {
    color: red;
    opacity: 1;
    font-size: 2em;
    .transition(e("font-size, color"));
}

尽管 LESS 似乎接受了这一点，但它只会为您发送的逗号分隔字符串中的最后一个属性设置动画。可惜。

于 2011-04-02T02:27:14.543 回答
25

使用此处找到的解决方案适用于一个和多个参数：

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

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

以这种方式使用它：

.transition(color, opacity .5s ease-in-out);

产量：

-webkit-transition: color, opacity .5s ease-in-out;
-moz-transition: color, opacity .5s ease-in-out;
-ms-transition: color, opacity .5s ease-in-out;
-o-transition: color, opacity .5s ease-in-outt;
transition: color, opacity .5s ease-in-out;
于 2012-11-21T09:53:21.530 回答
7

如果你想将逗号分隔的列表作为参数传递给 mixin，你可以简单地使用分号来分隔 arguments。

下面的代码可以根据需要使用您定义的 mixin：

a {
    .transition(color, opacity; .5s);
}
于 2013-10-12T15:48:47.170 回答
2

Less mixin 能够使用分号分隔的参数（以及逗号分隔）。他们建议您始终使用分号。

如果在调用 mixin 时参数列表中存在分号，则分号之间的所有内容都将被视为参数，即使这些内容中有逗号。这允许您将逗号分隔的列表作为ONE参数传递。如果分号不存在，它将把逗号当作参数分隔符。

.transition(@property: all; @time: 1s; @timing: ease-in-out) { // NOTE THE SEMICOLONS
    transition: @property @time @timing;
}

a {
    .transition(color,opacity; .5s); // SEMICOLON AFTER 'opacity'
}
b {
    .transition(color,opacity, .5s); // COMMA INSTEAD
}

输出：

a {
    transition: color,opacity .5s ease-in-out;
}
b { 
    transition: color opacity .5s; // invalid syntax
}

请注意，速记属性的语法transition必须是逗号分隔的单个转换列表。Sob有一个无效值，并且a有两个转换，其中未指定的值默认为其初始值：

  1. color 0s ease 0s
  2. opacity .5s ease-in-out 0s

这可能不是您想要的。（看起来你想要color .5s ease-in-out 0s和opacity .5s ease-in-out 0s。）

现在您可能想知道，“当没有其他参数时，如何将逗号分隔的列表作为单个参数传递？” 只需在列表末尾附加一个虚拟分号。

.transition(@property: all; @time: 1s; @timing: ease-in-out) {
    transition: @property @time @timing;
}

b {
    .transition(color,opacity;); // DUMMY SEMICOLON AFTER ARGUMENT
}
i {
    .transition(color,opacity); // MISSING SEMICOLON
}

输出：

b {
    transition: color,opacity 1s ease-in-out; // 'color,opacity' is the first argument
}
i {
    transition: color opacity ease-in-out; // 'color' is 1st arg, 'opacity' is 2nd arg
}

同样，for 的语法i无效，并且b有两个转换：

  1. color 0s ease 0s
  2. opacity 1s ease-in-out 0s
于 2016-05-04T15:10:23.210 回答