Am I overcomplicating my LESS for vendor prefixes?

Question

I've started using LESS for CSS lately and was wondering if my method is the correct way to target multiple vendor prefixes by creating my own LESS "mixin" (I think)?

.transition (@transition: 1s) {
transition: @transition;
-webkit-transition: @transition;
-moz-transition: @transition;
}

So if I were for example to have a .btn class and call .transition (which works)

 .btn:hover {
    color: red;
    .transition(@transition: 1s ease-in);
 }

And for animations.

@animate-fadein: fadeIn 1.7s linear;
.animation (@animation: fadeIn .2s linear) {
animation: @animation;
-webkit-animation: @animation;
-moz-animation: @animation;
-o-animation: @animation;
}

.btn

.btn {
 @animation(@animation: fadeIn .2s linear); 
}

This method works by the way. I'm just curious. Is my method over-complicating things and or am I just reinventing the wheel?

Answer 1

Well, using mixins help you to code more DRY (Don't repeat yourself), so that's good and the main reason why you should use Less. When your requirements change ( different browser to support) you will only have to change your mixins (which you can share over your projects too).

Notice that there are many mixin libraries to find on the web which have already create these prefix mixins for you. See: http://lesscss.org/usage/#frameworks-using-less-mixin-libraries

As already mentioned by @seven-phases-max, nowadays most people use autoprefix postprocessors to prefix their mixins. Also Bootstrap have integrate the autoprefixer into their Grunt build process in favor of the prefix mixins (since version 3.2). The only disadvantage of the most popular autoprefix postprocessor (https://github.com/postcss/autoprefixer) will be that it require Node.js installed and can not be used with some alternative compilers.

Since version 2 of Less its easy to use plugins. Less provide you an autoprefix plugin too. This plugin can be installed by running npm install -g less-plugin-autoprefix. After installing you can run for instance lessc --autoprefix="last 2 versions" main.less.

The Less autoprefix plugin an not use when compiling your Less code client side with the less.js compiler. -prefixfree seem to be a reasonable alternative when compiling Client side.

Last note about your vendor prefixes in some situations a [Graceful degradation strategy] (https://www.w3.org/community/webed/wiki/Optimizing_content_for_different_browsers:_the_RIGHT_way#Graceful_degradation) will be better than trying to support even the most old browser with newest technologies.