0 Haml and Sass: The Verdict

After building a somewhat full layout from the ground up with Haml and Sass, I must say the experience was rather fun and pleasant.

A purist like myself who had developed a loving relationship with pure HTML/CSS markup, to my surprise, Haml and Sass really impressed me. In a lot of ways it takes the redundancy out of writing HTML and CSS. No more closing tags and brackets pretty much sums it up.

Trying out Haml and Sass was very easy. Initially I was afraid that I’d have to get an entire Rails stack going just to use try it. Luckily there was StaticMatic. It filled the bill perfectly in terms of the test drive. On to the verdict

Indentation

Haml uses indentation that’s plenty similar to Python (a programming language). So for example.


#container
  %a{:href => '#'} 
    Snoop Dogg

The above would produce:


<div id="container">
  <a href="#">
    Snoop Dogg
  </a>
</div>

Both Haml and Sass are all about writing less code which falls well into the pocket of what Ruby on Rails is all about. The marginal difference between HTML and Haml is somewhat small, but largely rewarding. The

Sass, a CSS interpreter in Ruby, is mostly the same in terms of how CSS code works. Nonetheless, there are a few productivity boosts. For starters, every attribute starts with a colon (:) and brackets are completely removed, again taking notes from Python (kind of). Let’s see an example.


li.current
  :position relative
  :top 10px
  a
    :padding 5px 7px 6px
    :background-color #fff
    :border 1px solid #DBEBF8

In the example above you can see that Sass is written almost exactly like actual CSS. But you also notice that a lot of things are removed as mentioned before. Like Haml, Sass uses indentation in a very intentional way as well. The code example above would produce the following:


li.current {
  position: relative;
  top: 10px; }
  li.current a {
    padding: 5px 7px 6px;
    background-color: #fff;
    border: 1px solid #DBEBF8; }

Both Haml and Sass see indentation as nesting which is great and takes the confusion out of writing complex CSS. In the Sass example, we always know that an indented a tag will always be seen as li.current a.

Conclusion

Haml and Sass offer the HTML/CSS monkey a lot in terms of productivity and flexibility. Unfortunately you’d be better off visiting the Haml/Sass website. But all in all, working with Haml and Sass was a wonderful experience and I’d be tempted to replace my traditional HTML/CSS workbench across the board.

Use Textile for formatting