{Less} CSS3 mixins and vendor prefixes
I doubt {Less} is much of a revenlation revelation to anyone nerdy enough to be reading my site, so I’ll skip the usual platitudes and jump right into why I’m writing this.
As part of a recent site build, I’ve been relying heavily on CSS3 features, many of which are only partially implemented across the browsers. Not a big deal for me, it just means a lot of vendor prefixes:
#someElement {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
But I have a few problems with this (CSS validation and older Internet Explorer are not among them). Firstly, its a pain to need to add that 4 lines every time, and secondly, one day I’ll want to remove some or all of the vendor prefixes and I’ll need to do it a bunch of times.
As a devoted {Less} user, the answer seemed obvious at first, I’ll just throw in a mixin to reduce it down into one simple line.
#someElement {
.transition(all, .5s);
}
I’m hardly the first person to come up with this idea, but looking around for other .less files that handled vendor prefixes the way I wanted, with all the CSS3 items I wanted, was challenging. So I cobbled together my own file.
You can grab it off Github if that’s your sort of thing LESSCSS mixins file of vendor prefixes for CSS3.
John Giotta wrote on
How does this tool differ from Sass?