Converting CSS to SASS files

16 Apr 2008

Update: as ‘ste’ points out in a comment Haml ships with an executable that does this for you. So hopefully googlers don’t bother reading through my lousy regexps and just use that tool ;)

If I were to write a post about how much Haml and Sass have changed the way I develop for the web I’d spend the first few paragraphs gushing about how Haml lets you write your DOM directly and takes care of the hideous (X)HTML in the middle. Then I’d write an elaborate sonnet about how SASS makes CSS almost usable for developers who like to keep things DRY.

But we’ll save that Yegge-length post for another day. For now, here’s a chance to almostly completely convert your CSS files into SASS with just a few regexps (using $’s rather than 's because TextMate likes it that way):

# trim opening braces
find: /\s?{\s*$/
replace:

# and closing braces
find: /^\s*}/
replace:

# and rearrange your punctuation
find: /^([ ]*)([\w-]+):\s*([\w\d #%,\(\)/\.-]+);\s*$/
replace: $1:$2 $3

Then rearrange and simplify to your heart’s content. Haml+Sass makes developers happy.

  • ste said: Erm... are you aware of the existence of css2sass? :-)
  • Jack Danger Canty said: CLEARLY I'm an idiot if there's already css2sass. Why have I been regexping in my text editors all this time? Seriously, ste, you should have told me about this months ago ;)
  • Mislav said: It's right there in the Haml gem for quite some time now ... gets installed as a binary, too. My dear sir, it is clear that you are ignorant :P
  • ynw said: Tag me ignorant
  • Rue said: Ignorant maybe, but thanks for sharing because I didn't know there was a css2sass and would have just hacked at my css in vi.
  • Mike said: pfff.... i get ignorant too... but your work is good. thanks !

Please if you found this post helpful or have questions.