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

It is possible mate. I am pretty sure I saw a similar question earlier but can't trace it back now. But it would be better to use Prefix free or Auto-prefixer etc for this. — Harry, Dec 23 '14 at 12:29
Here is the one I was referring to - http://stackoverflow.com/questions/21061361/less-js-mixin-property-as-an-argument-of-another-mixin. You would also find [this](http://stackoverflow.com/questions/11419741/less-css-mixins-with-variable-number-of-arguments/26190417#26190417) question useful. — Harry, Dec 23 '14 at 12:32

Bass Jobsen · Accepted Answer · 2015-01-05T00:05:26.337

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.

LESS transition mixin with prefixes

1 Answers1

Linked