HAML Quick reference

This would serve as a quick reference for HAML.

HAML is a markup language that gets transformed into HTML. you may ask, why not write write my code in HTML, What's wrong with HTML? And how does HAML solve does the problem?HAML_logo

Problem with HTML

HTML is verbose & becomes hard to maintain specially, if you have a large site. To see why HTML's verbosity is issue, consider this example:

HTML

<div id="profile">
<div class="left column">
<div id="date"><strong>4th June 2012</strong></div>
<div id="address"><em>Jaipur, India</em></div>
</div>
<div class="right column">
<div id="email"><a href="www.example.com">example.com </a></div>
<div id="bio">Rails Developer</div>
</div>
</div>

As you may notice, there are couple of issues with html:

  1. Every starting tag has to have a ending tag
  2. The number of words & lines are more
  3. plain HTML is pain to write & read

Now, compare this to HAML which basically does the same thing but in lot more human readable form

#profile
.left.column
#date
       %strong 4th June 2012
#address
       %em Jaipur, India
.right.column
#email
       %a{:href="www.example.com"}
            example.com
#bio   Rails Developer

So in short,

Syntax - Description

Example:

#body - Produces div tag with id="body" as div tag is default

For more, kindly refer to HAML official site