LESS: Using mixins inside mixins misuse of browser prefix

Question

SO, here my first mixin

.3transitions (@value1,@value2,@value3,@duration){
   @value: ~"@{value1},@{value2},@{value3}";      
   .transition-property(@value); 
   .transition-delay(0); 
   .transition-duration(@duration); 
   .transition-timing-function(ease); 
 }

and here is the second (among many others)

.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}

On webkit browsers I should get the compiled CSS with proper browser prefix, but I get

-webkit-transition-property: margin-top,opacity,transform;

instead of

-webkit-transition-property: margin-top,opacity,-webkit-transform;

How can I go around this please? Is there a way to determin in LESS that I am using a CSS3 style?

It is [possible](http://stackoverflow.com/questions/21061361/less-js-mixin-property-as-an-argument-of-another-mixin), but read the remarks there (in short: waste of time). — seven-phases-max, Jul 07 '14 at 19:01

score 2 · Answer 1 · edited May 23 '17 at 11:57

Since Less v2, it become easy to use plugins. The autoprefix plugin post-processed your Less code by autoprefixer.

You can install the autoprefix plugin by running the following command in the console:

npm install -g less-plugin-autoprefix

After installing the plugin you should be able to run for in stance the following command:

echo "element{ transition-property: margin-top,opacity, transform; }" | lessc - --autoprefix="last 20 versions"

The preceding command will compile into CSS code as follows:

 element {
  -webkit-transition-property: margin-top, opacity, -webkit-transform;
     -moz-transition-property: margin-top, opacity, -moz-transform;
       -o-transition-property: margin-top, opacity, -o-transform;
          transition-property: margin-top, opacity, transform;
}

You can not use this autoprefix plugin when compiling your Less code client side in the browser. For client side in browser compiling you can consider to use -prefixfree This Javascript library add browser’s prefix to any CSS code leveraging Javascript.

When you can not run the autoprefix which requires Node installed, for instance those who compile Less with one of the alternative compilers, you should fall-back to prefix mixins such as that found here written by @seven-phases-max. Better you should not reinvent the wheel and try one of the mixin libraries that already fix the prefix problems for you.

Thanks Bass. I found a 5 lines auto-prefixer that does what I needed. PS: I know you from Github and love your work. Cheers :) — thednp, Nov 02 '14 at 19:20

LESS: Using mixins inside mixins misuse of browser prefix

1 Answers1