Multiple properties are getting treated as separate arguments in mixins

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.

Cu

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