Haml is a pretty awesome templating language for marking up XML documents and hands-down brilliant for marking up XHTML, I think most people who “get it” use Haml whenever they can. We’ve been using it since day one at LearnHub, it makes my job a lot more enjoyable having yet another elegant tool at my disposal. And yes, it’s fast!

So pretty much everyone agrees Haml is fantastic, but what about Haml’s smokin’ hot sister; Sass? I have been using Sass exclusively on LearnHub since day one too, I find the benefits to be just as high as Haml if not higher, especially when it comes to nested selectors, less typing means less room for error and a document that is compact and easier to read.

There are not as many people out there using Sass though, and I think that is a shame. Sass lets you do some pretty nifty things that in turn give you great power. You can easily scope sets of rules to certain selectors and change them with ease, Sass removes all of the syntactic dirt and mostly all of the repetition from CSS. Consider the following example:

#content {
  margin: 0 8px; }
  #content .block {
    border: 1px solid #ddd; }
    #content .block p {
      font-size: 116%; }

Not bad, now let’s see it in Sass:

#content
  :margin 0 8px
  .block
    :border 1px solid #ddd
    p
      :font-size 116%

Sweet jeebas, why wouldn’t you want that?

Another one of my favorite things about Sass is the ability to declare constants, take the following for example, the ability to spec out all of your typefaces in one spot:

!display = "'lucida grande', 'trebuchet ms'"
!sans = "'helvetica neue', arial, 'dejavu sans'"
!serif = "georgia, times"
!monospace = "monaco, consolas, 'dejavu sans mono'"

And the power to do fun stuff such as:

!gunmetal = #ccc
!steel = !gunmetal + #111
!aluminum = !steel + #111

Now I personally don’t use evaluations in Sass very much, I find it easier to just declare everything explicitly, but I often use string concatenation in Sass everywhere:

.pillar
  .brick
    :border = "1px solid" !steel

In spite of Hampton raising an eyebrow, I break from convention and store my Sass documents in /app/sass which I then have compile out into /public/stylesheets/compiled this works better for me as it removes any confusion as to what stylesheets are Sass output and what are hand-coded CSS.

To do this, simply set the following Sass options during initialization:

Sass::Plugin.options[:template_location] = File.join(RAILS_ROOT, 'app/sass')
Sass::Plugin.options[:css_location] = File.join(RAILS_ROOT, 'public/stylesheets/compiled')

I tip my hat to Nathan and the other contributors of Haml; it keeps getting better and better in terms of speed and features. I remember pre version 1.8 speed was a bit of a concern, but after its release the cynics stopped knocking. With the recent release of version 2 we have seen a slew of improvements and enhancements (better error messages, auto-escaping) as well as yet another speed boost — LOVE IT!