"LessCSS goodies"

If you haven’t heard about LessCSS then check it out, really cool solution for writing css code in concise way. I’m planning to use it in some of my projects (and probably for this blog’s styles) and I’ve created two tools which could ease my work with LessCSS.

First tool, css2less, is CSS-to-LessCSS converter. Of course it can’t use all of LessCSS features because only programmer knows where to use variables and other stuff properly for specific project. However what it can do is to find all rules that can be nested and outputs them for given css file.

Grab it from github and use like that:

ruby css2less.rb my.css > my.less

You will get .less file with all styles from original .css file but with nested rules notation. It’s a good start for further tweaking, ie adding variables.

Second tool, rack-lesscss, is a Rack middleware which converts .less files into .css files on the fly during request. It’s main purpose is to ease development stage when you change your .less files frequently. With rack-lesscss middleware enabled you don’t need to compile .less files by hand after every change. LessCSS compiler has an option to watch for changes in .less file and automatically recompiles it but you need to remember to run compiler in watch mode for every stylesheet every time you start development session. There are also at least two Rails plugins which nicely integrates LessCSS into the app but this middleware can be used with Rails as well as with other ruby web frameworks like Merb or Sinatra.

Install gem:

sudo gem install --source http://gems.github.com sickill-rack-lesscss

or grab it from github.

Enable by adding following to your rackup file (config.ru, or config/rack.rb in Merb app):

require 'rack-lesscss'
use Rack::LessCss, :less_path => File.join(APP_ROOT, "public", "css"), :css_route => "/css"

Above code will enable on-the-fly .less files compilation for all requests matching /css/*.css.

It accepts two arguments:

• :less_path – directory where source .less files are stored (required)
• :css_route – route which this middleware will handle (optional, default is /stylesheets)

And don’t use it on production for obvious reason :) It’s meant to be used for development only.