Less CSS: Mixins with Variable Number of Arguments

Question

LESS allows parametric mixins, such as:

.transition(@property, @duration){
    transition:         @property @duration;
    -moz-transition:    @property @du         


        

Answer 1

Current as of LESS 1.4, the documentation (http://lesscss.org/features/#mixins-parametric-feature-mixins-with-multiple-parameters) suggests the proper way to handle this:

Using comma as mixin separator makes it impossible to create comma separated lists as an argument. On the other hand, if the compiler sees at least one semicolon inside mixin call or declaration, it assumes that arguments are separated by semicolons and all commas belong to css lists:

Concretely, mixin:

.transition(@prop-or-props) {
    -webkit-transition: @prop-or-props;
       -moz-transition: @prop-or-props;
         -o-transition: @prop-or-props;
            transition: @prop-or-props;
}

usage:

.transition(opacity .2s, transform .3s, -webkit-transform .3s;);

Note that multiple properties are separated by commas and the trailing semi-colon causes the comma separated list to be treated as a single parameter in the mixin.

It would be nicer to define the mixin with a rest... parameter and be able to extract each element of the arbitrary-length arguments for separate handling, but the use-case I'm thinking of is adding vendor prefixes to transform transitions (so i could call it simply with .transition(opacity .2s, transform .3s) and have the -webkit-transform bit added automatically) and perhaps this is better handled by a different utility anyway (gulp-autoprefixer, for example).