LESS transition mixin with prefixes - less

Question

I was wondering if it's possible to create a LESS mixin that I could use like this:
.transform(transition, .5s, ease-out);
and has this CSS as output:
-webkit-transition: -webkit-transform .5s ease-out;
-moz-transition: -moz-transform .5s ease-out;
transition: transform .5s ease-out;
but I would also be able to use the same mixin for other properties (i.e. .transition(opacity, .5s) should output to -webkit-transition:opacity .5s; -moz-transition:opacity .5s; transition:opacity .5s;
Thanks!
Leon

Answer 1

Since Less version 2 you can use the autoprefix postprocessor plugin and the consensus is that you should use it for best practice.
The Less autoprefix plugin can be found at: https://github.com/less/less-plugin-autoprefix.
After installing the you can run:
echo "selector {transition: transform .5s ease-out;}" | lessc - --autoprefix="last 20 versions"
The preceding command outputs:
selector {
-webkit-transition: -webkit-transform 0.5s ease-out;
-moz-transition: -moz-transform 0.5s ease-out;
-o-transition: -o-transform 0.5s ease-out;
transition: transform 0.5s ease-out;
}
You should consider Graceful degredation and run the autoprefix plugin without any browser argument. (lessc --autoprefix). Then your output will look like that shown below:
selector {
-webkit-transition: -webkit-transform 0.5s ease-out;
transition: transform 0.5s ease-out;
}
Notice that you can not use the auto prefix plugin when using less.js to compile your Less code in the browser. For client side compiling you can use the -prefix-free library.