Question

LESS allows parametric mixins, such as:

.transition(@property, @duration){
    transition:         @property @duration;
    -moz-transition:    @property @duration; /* Firefox 4 */
    -webkit-transition: @property @duration; /* Safari and Chrome */
    -o-transition:      @property @duration; /* Opera */
}

However, this doesn’t always work with properties such as transitions. If you are trying to have multiple transitions and attempt to call the mixin multiple times, the last mixin overrides all previously defined transitions. That’s because the proper CSS3 syntax for defining multiple transitions is:

... {
    transition: @property1 @duration1, @property2 @duration2, ...;
}

The only way that I can think of to define multiple transitions as mixins is to overload the mixin:

.transition(@property, @duration){...}
.transition(@property, @duration, @prop2, @dur2){...}
.transition(@property, @duration, @prop2, @dur2, @prop3, @dur3){...}

Is there a more robust and concise way of defining the transition mixin to take in a variable number of arguments and construct the appropriate transition CSS?

Context: Sometimes I’d like to transition on multiple properties; for example, a :hover might trigger transitions on background color, box-shadow, text-color, etc…

Answer 1

See my answer here: Multiple properties are getting treated as separate arguments in mixins

Summary: use this mixin for variable number of arguments:

.transition (@value1,@value2:X,...)
{
    @value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;

    -webkit-transition: @value;
    -moz-transition: @value;
    -ms-transition: @value;
    -o-transition: @value;
    transition: @value;
}