混合属性中的多个属性被视为单独的参数 [英] Multiple properties are getting treated as separate arguments in mixins

问题描述

我正在尝试编写一个mixin，但是我似乎无法使参数按照我想要的方式工作:多个属性被每个都视为一个单独的参数.

I'm trying to write a mixin, but I can't seem to get the arguments working the way I want: multiple properties are getting treated each as a separate argument.

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

有什么想法吗?

推荐答案

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

I'd suggest using LESS's escape function, i.e.:

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似乎接受了它，但它只会使您通过逗号分隔的字符串中的最后一个属性成为动画.可惜.

And though it seems that LESS accepts that, it will only animate the last property in the comma-separated string you send through. A pity.

这篇关于混合属性中的多个属性被视为单独的参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！