Hi! My name is Cédric Bozzi, I make websites and iOS apps, and this is my blog about technology (mostly a Twitter archive, really).

11 February 2010

“LESS.app For Mac OS X”

This. Is. Magical.

If you don’t know what Less is (I didn’t — or I must have heard about it once and promptly forgotten), it’s a Ruby application descended from Heaven to let you write parametric CSS files.

You can set up variables (e.g., color values) in the beginning of your file, reference them everywhere and only have to change the value once when you want to update the look of your entire site. You can do some math on those values (e.g., dimmer or brighter variations of those colors for some elements). You can create helper classes to include into the definition of other classes (e.g., cross-browser shadows or rounded corners), and they can even behave like functions (e.g., take the corner radius as a parameter). More info on lesscss.org.

It becomes annoying, though, in that every time you edit your CSS you have to run the file through a compiler — you can’t just upload the parametric CSS as is, you have to turn it into a regular .css file (at least as far as I know; maybe there is, or will be someday, an Apache plugin or whatever). Nobody wants to have to bother with that, and that’s where this excellent new app comes in: just give it a list of folders containing your .less files, and it will watch them and compile them into .css files every time they’re updated. There you go, .css files ready to be uploaded. (For now, the Less app doesn’t automatically send the compiled files to your FTP program, but the developer assures me that’s coming.)

If you’ve ever maintained somewhat complex CSS files, you know you want this.

 

A hint: if you want to install the Less compiler on Leopard (the application doesn’t install it by itself, for some reason), you’re going to need one more command-line instruction than documented on lesscss.org.

sudo gem update −−system

sudo gem install less

Also, the compiler can be a little picky about the CSS it wants to compile. For instance, having a comma-separated list of CSS selectors, with some of them commented out, will throw a syntax error. Just work around it.

Archives

2001 01 02 03 04 05 06 07 08 09 10 11 12

2002 01 02 03 04 05 06 07 08 09 10 11 12

2003 01 02 03 04 05 06 07 08 09 10 11 12

2004 01 02 03 04 05 06 07 08 09 10 11 12

2005 01 02 03 04 05 06 07 08 09 10 11 12

2006 01 02 03 04 05 06 07 08 09 10 11 12

2007 01 02 03 04 05 06 07 08 09 10 11 12

2008 01 02 03 04 05 06 07 08 09 10 11 12

2009 01 02 03 04 05 06 07 08 09 10 11 12

2010 01 02 03 04 05 06 07 08 09 10 11 12

2011 01 02 03 04 05 06 07 08 09 10 11 12

2012 01 02 03 04 05 06 07 08 09 10 11 12

2013 01 02 03 04 05 06 07 08 09 10 11 12

2014 01 02 03 04 05 06 07 08 09 10 11 12