DerekAllard.com

{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-transitionall .5s;
       -
moz-transitionall .5s;
         -
o-transitionall .5s;
            
transitionall .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.

This entry was made on and filed into XHTML & CSS.

Comments

John Giotta wrote on

How does this tool differ from Sass?

Derek wrote on

SASS and Less are very similar John. I picked up on Less since SASS was originally developed as a Ruby tool, and I was in a PHP world. I’ve played with SASS since, and immediately felt comfortable… which makes sense since much of Less was inspired by SASS at the start.

Laurie wrote on

I always knew I wasn’t nerdy enough to be reading your site. :)

I totally dig this as a huge time saving measure, but I’m curious how badly it messes up the CSS if the user has javascript blocked?

Johan André wrote on

Good stuff! You could remove the text-shadow mixin though. It’s already implemented without vendor prefixes in both mozilla and webkit.

Jean-Philippe M. wrote on

Bourbon seems to do this (and more) for Sass, it’s in Ruby though :

https://github.com/thoughtbot/bourbon

Johan André wrote on

Laurie:

If you’re on a mac (which you totally should be) you should use Codekit (or a similar tool) to compile your stuff into “standard” CSS before going live with the site.

I would not recommend using less.js on a production site.

Derek wrote on

Thanks John, fixed.

Johan, good point re: text shaddow; I’ll nab it. Thanks.

And yup Laurie, my process is to pre-compile any less into CSS, and that is what gets uploaded. Codekit is impressive as hell.