How to make a mixin for a property with an indefinite number of parameters?

Question

Less

Faced with a certain difficulty. There is a css-property "transition", I made this thing for it:

.transit(@prop: all, @tm: 1s, @fn: ease-out, @tm2: 0){
    -webkit-transition: @prop @tm @fn @tm2;
       -moz-transition: @prop @tm @fn @tm2;
        -ms-transition: @prop @tm @fn @tm2;
         -o-transition: @prop @tm @fn @tm2;
            transition: @prop @tm @fn @tm2;

For this property, you can set multiple values ​​separated by commas:
transition: <переход> [, <переход> ]*
How to do this with LESS?

Answer 1

It is enough to make a mixin with one argument, then everything that is passed to the mixin will be considered an argument. And so that the comma is not considered a separator, you need to escape the value with it.

.transit(@prop: all){
    -webkit-transition: @prop;
    -moz-transition: @prop;
    transition: @prop;
}

.test1 {
    .transit(all .2s ease);
}

.test2 {
    .transit(color 10s);
}

.test3 {
    .transit(~"width 1s, height 5s");
}

But in general, using mixins for browser prefixes is bad manners. Use Autoprefixer , it will arrange the necessary prefixes itself. Leave the mixins for someone else :)