Multiple properties are getting treated as separate arguments in mixins - less

Question

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.
Current Code
.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);
}
Desired Output
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;
}
Actual Output
a {
-moz-transition: color opacity .5s;
-webkit-transition: color opacity .5s;
-o-transition: color opacity .5s;
transition: color opacity .5s;
}
Any ideas?

Answer 1

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

Answer 2

Using the solution found here works with one AND multiple arguments:
.transition (#value1,#value2:X,...)
{
#value: ~`"#{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
-webkit-transition: #value;
-moz-transition: #value;
-ms-transition: #value;
-o-transition: #value;
transition: #value;
}
Using it this way:
.transition(color, opacity .5s ease-in-out);
yields:
-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

If you want to pass a comma-separated list as an argument to mixin, you can simply use a semicolon to separate arguments.
Code below works as desired with the mixin you defined:
a {
.transition(color, opacity; .5s);
}

Answer 4

Less mixins have the ability to use semicolon-separated arguments (as well as comma-separated). They recommend you always use semicolons.
If a semicolon is present in a list of arguments when the mixin is called, everything between semicolons will be considered as arguments, even if those things have commas in them. This allows you to pass a comma-separated list as ONE argument. If a semicolon is NOT present, it will treat commas as argument separators.
.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
}
output:
a {
transition: color,opacity .5s ease-in-out;
}
b {
transition: color opacity .5s; // invalid syntax
}
Note that the syntax of the shorthand transition property must be a comma-separated list of single transitions. So b has an invalid value, and a has two transitions, in which the unspecified values default to their initial value:
color 0s ease 0s
opacity .5s ease-in-out 0s
This is likely not what you intended. (It looks like you wanted color .5s ease-in-out 0s and opacity .5s ease-in-out 0s.)
Now you might be wondering, "how do I pass a comma-separated list as a single argument, when there are no other arguments?" Simply append a dummy semicolon at the end of the list.
.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
}
output:
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
}
Again, syntax for i is invalid, and b has two transitions:
color 0s ease 0s
opacity 1s ease-in-out 0s