1
.transition (@prop: all,
@time: 1s,
@ease: linear,
@delay: 0s) {
    -webkit-transition: @prop @time @ease @delay;
    -moz-transition: @prop @time @ease;
    -o-transition: @prop @time @ease;
    -ms-transition: @prop @time @ease;
    transition: @prop @time @ease;
}
.my-class-one {
    // stuff...
    .transition(bottom, 0.5s, ease-in, 0s);
}

.transition-two (@prop-one: all,
@time-one: 1s,
@ease-one: linear,
@delay-one: 0s,
@prop-two: all,
@time-two: 1s,
@ease-two: linear,
@delay-two: 0s) {
    -webkit-transition: @prop-one @time-one @ease-one @delay-one, @prop-two @time-two @ease-two @delay-two;
    -moz-transition: @prop-one @time-one @ease-one @delay-one, @prop-two @time-two @ease-two @delay-two;
    -o-transition: @prop-one @time-one @ease-one @delay-one, @prop-two @time-two @ease-two @delay-two;
    -ms-transition: @prop-one @time-one @ease-one @delay-one, @prop-two @time-two @ease-two @delay-two;
    transition: @prop-one @time-one @ease-one @delay-one, @prop-two @time-two @ease-two @delay-two;
}
.my-class-two {
    // stuff...
    .transition-two(bottom, 0.5s, ease-in, 0s, right, 0.5s, ease-in, 0s);
}

As you can see, it's starting to amount to quite a lot of code...

Does anyone have any ideas of how to make this this more generic? For three, four, five etc. transition properties to use the same function?

Rob
  • 14,746
  • 28
  • 47
  • 65
basickarl
  • 37,187
  • 64
  • 214
  • 335
  • 2
    You should have a look at this answer - http://stackoverflow.com/questions/11419741/less-css-mixins-with-variable-number-of-arguments/26190417#26190417. It makes use of loops and property merge functions to produce the expected output even if the no. of properties that need to be transitioned is variable. (Note: Please don't use mixins to add vendor prefixing. It is better to use libraries like prefix--free or Auto prefixer.) – Harry Apr 07 '16 at 13:19
  • 1
    @Harry Nice info, ta! I'll def update with your suggestions. – basickarl Apr 07 '16 at 14:08

0 Answers0