A LESS mixin for a transition with a prefixed transition-property

The most common mixin you will find in LESS for CSS3 transitions is something like the following:

1
2
3
4
5
6
7
.transition (@prop, @time, @ease) {
    -webkit-transition: @prop @time @ease;
       -moz-transition: @prop @time @ease;
        -ms-transition: @prop @time @ease;
         -o-transition: @prop @time @ease;
            transition: @prop @time @ease;
}

The proplem with this is that if you want to transition a property that requires a prefix such as transform:

1
.transition(transform, 0.5s, ease-out)

You will end up with:

1
2
3
4
5
-webkit-transition: transform 0.5s ease-out;
   -moz-transition: transform 0.5s ease-out;
    -ms-transition: transform 0.5s ease-out;
     -o-transition: transform 0.5s ease-out;
        transition: transform 0.5s ease-out;

This is not what you want, you need to have the transition-property prefixed as well as the transition. Below is a mixin that I came up with that will solve this problem:

1
2
3
4
5
6
7
.transitionPrefixProp (@prop, @time, @ease) {
    -webkit-transition: e("-webkit-@{prop}") @time @ease;
       -moz-transition:    e("-moz-@{prop}") @time @ease;
        -ms-transition:     e("-ms-@{prop}") @time @ease;
         -o-transition:      e("-o-@{prop}") @time @ease;
            transition:                @prop @time @ease;
}

Which will output:

1
2
3
4
5
-webkit-transition: -webkit-transform 0.5s ease-out;
   -moz-transition:    -moz-transform 0.5s ease-out;
    -ms-transition:     -ms-transform 0.5s ease-out;
     -o-transition:      -o-transform 0.5s ease-out;
        transition:         transform 0.5s ease-out;

This is kind of a brute force approach by adding all prefixes regardless of whether they are required, but it does work well.