LESS transition mixin with prefixes

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.