On a recent project, our designer resisted our attempts to refactor their CSS into something that didn't resemble a dog's breakfast. What resulted was about 9000 lines of CSS spread across 8 files. For a simple site too! (I've only myself to blame for letting it into the codebase.) So yesterday I did something about it.

  * Grabbed HAML/Sass @gem install haml@  (well I was using actually haml already)

  * Created dir for .sass files @mkdir public/stylesheets/sass@

  * Migrate css 2 sass @cd public/stylesheets/@ @css2sass blah.css > sass/blah.sass@

  * remove all .css from my git repo @git rm blah.css@

  * Ignore all .css during checkins Insert this into your .gitignore @public/stylesheets/*.css@

  * Make sure you've got the right stylesheet includes E.g. @= stylesheet_link_tag "blah.css", :media => "all"@

  * Test Fire up your app, and point your browser at it. The .css files will be automagically generated.

  * Refactor the .sass, mercilessly (Go read up on Sass) I saved about 8000K lines of CSS code. Smack that!