Multiple properties are getting treated as separat

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

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:

1. color 0s ease 0s
2. 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:

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

Answer 2

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 3

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 4

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