在mixins中,多个属性被视为单独的参数

Question

我正在尝试编写一个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;  
}

有任何想法吗？

Answer 1

我建议使用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似乎接受了这一点,但它只会为您发送的逗号分隔字符串中的最后一个属性设置动画.可惜.

Answer 2

使用此处找到的解决方案可以使用一个AND多个参数:

.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;

Answer 3

如果要将逗号分隔列表作为参数传递给mixin,则只需使用分号分隔参数即可.

下面的代码与您定义的mixin一起工作:

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