Posted on November 27, 2012 by Steve Mu

A couple of months ago, one of my friend asked me why I moved to developing all my HTML prototypes in HAML. After all, HAML is a pseudo-language/meta-language/template-language that generates HTML, so why not just use HTML directly? In short, because HAML saves a tremendous amount of time.

For example, one of the HTML prototype I worked on used 235 lines, and a total of 6808 characters in HAML, which generated 298 lines and 10282 characters in HTML. Not only does coding in HAML save a ton of time, it saves you from repetitive stress injury!

So how does it work?

HAML uses a simple, straight forward syntax that omits all of the “<” and “>” characters, and utilizes indent levels to organize the nesting and closing of tags. All “tags” are self-closing in HAML, which also solves a lot of complication/confusion with raw HTML, where you can easily miss a closing tag and screw up the entire file.

For example, this bunch of code:

.header
  %ul.list
    %li first item
    %li
      %a{:href => 'index.html'} link

Will generate this:

<header>
  <ul>
    <li>First Item</li>
    <li>
      <a href="index.html">link</a>
    </li>
  </ul>
</header>

What HAML does not allow is embedding multiple tags using its syntax. That’s why the %a in the example above is separated into a different line. For those times where it’s absolutely necessary to embed tags (and this happens quite a bit with content text), you can always include normal HTML tags and HAML will just pass it through and render as is.

Tools to generate HTML from HAML

Normally, HAML is used as a part of RoR to replace its template language. For mockup/prototype purposes you may not always have RoR running, or maybe your project doesn’t run on RoR at all, but you can always generate flat HTML from HAML by using a third party tool or plugins.

CodeKit is available on Mac. Fire.app is available for Windows, Mac, and Linux. LiveReload has a Mac version and an alpha version for Windows.

More on HAML

For full documentation, syntax, and usage, visit HAML’s official hompage (haml.info) for more.