Managing CSS with LESS is flippin’ sweet

I had the opportunity to meet groovy new folks and learn lots of really cool tricks at the HTML5tx conference in early October. One of the things that got me really riled up is LESS, the dynamic stylesheet language. (Not to be confused with the similarly-named Less framework, the CSS grid system—also is in my queue to check out.)

If you’re not familiar with LESS, it’s a great way to build and manage large, complex CSS style sheets lightning-fast using variables, mixins, operations and functions. You can either link the .less file to your HTML document and render it client-side using JavaScript (dude, don’t waste your visitor’s processing cycles), or you can compile the LESS code during design time on your machine and attach the resulting CSS file to your document.

Just to give you a little taste of the awesome, this is a quick summary what variables and mixins are all about.

Variables

Variables let you specify a value once, then re-use it throughout an entire document. Say what? In other words, you can specify things like colors, font faces, or other properties only once, and re-use the variable throughout the CSS document.

So write this in your .less file:

…and it gets compiled in your CSS as this:

Mixins

Mixins let you bundle several properties together, and then reference them as a single group. This is awesome for when you need to create several CSS3 properties like box-shadow or border-radius to cover multiple browsers.

So write this in your .less file:

…and it gets compiled in your CSS as this:

Want more LESS?

Yes, you know you do. Go check out the LESS dynamic stylesheet language syntax and (for Mac users) download the LESS.app for Mac OS X to automagically compile LESS files on your local machine.