LESS: Mixin with a unique argument to manage css3 transitions - less

Question

Using LESS CSS, I would like to simplify my code using Mixins to put "out" transitions declarations, but the following syntax is wrong. The problem is in the attribute #color-time definition that has 2 arguments:
.links-transition (#color-time:color 1s, border-color 1s)
{
-webkit-transition:#color-time;
-moz-transition:#color-time;
-ms-transition:#color-time;
-o-transition:#color-time;
transition:#color-time;
}
a
{
color:red;
.links-transition;
}
In official documentation I found that putting a ; at the end, teach LESS how to consider arguments, considering them separated by ;, so one argument in my case like this:
.links-transition (#color-time:color 1s, border-color 1s;)
Unfortunately this does not run. I think it depends since white space... is there a correct syntax to obtain the correct CSS without using 2 arguments in Mixin recall?
Thank you.

Answer 1

You can use string escaping and interpolation like this:
.links-transition (#arg:"color 1s, border-color 1s") {
#color-time: ~"#{arg}";
-webkit-transition:#color-time;
-moz-transition:#color-time;
-ms-transition:#color-time;
-o-transition:#color-time;
transition:#color-time;
}
a {
color:red;
.links-transition ("color 2s, border-color 2s");
}
it will return this CSS:
a {
color: red;
-webkit-transition: color 2s, border-color 2s;
-moz-transition: color 2s, border-color 2s;
-ms-transition: color 2s, border-color 2s;
-o-transition: color 2s, border-color 2s;
transition: color 2s, border-color 2s;
}
hope this does what you want.
For more ideas: there are some additinal approaches/solutions that you can find on SO, like this two for example:
Less CSS: Mixins with Variable Number of Arguments
Multiple properties are getting treated as separate arguments in mixins
Update: in LESS 1.4 beta it works the way you wanted to do it:
.links-transition (#color-time: color 1s, border-color 1s;) {
-webkit-transition:#color-time;
-moz-transition:#color-time;
-ms-transition:#color-time;
-o-transition:#color-time;
transition:#color-time;
}
a {
color:red;
.links-transition (color 2s, border-color 2s;);
}
has the same output as the above solution. Comma separated argunets are possible since 1.3.2, however they can apparently not include whitespaces.