haml.tutorial for Rails developers

How to Convert Let’s start off with some basic ERB that we want to convert. ERB <strong><%= item.title %></strong> Haml %strong= item.title In Haml, we write a tag by using the percent sign and then the name of the tag. This works for %strong, %div, %body, %html; any tag you want. Then, after the name of the tag is =, which tells Haml to evaluate Ruby code to the right and then print out the return value as the contents of the tag. Unlike the ERB above, Haml will automatically detect newlines in the return value and format the tag properly. Simple tags are all well and good, but what about adding attributes to tags? HTML <strong class="code" id="message">Hello, World!</strong> Haml %strong{:class => "code", :id => "message"} Hello, World! The attributes are just a standard Ruby hash. The class attribute is “code”, the id attribute is “message”. Notice that in this example, we didn’t use =, so “Hello, World!” is interpreted as a normal string, not Ruby code. There is a simpler way to define this tag in Haml, since class and id are such common attributes and since most designers (and coders) are familiar with CSS, we can use similar notation to describe this tag. Haml %strong.code#message Hello, World! Not only that, but since div tags are so common, you can leave off the tag definition and have it default to %div. Haml .content Hello, World! HTML <div class='content'>Hello, World!</div> Now what about something a little more complicated? ERB <div class='item' id='item<%= item.id %>'> <%= item.body %> </div> Pretty basic. This might be part of a partial or something. Let’s convert it to Haml. Haml .item{:id => "item#{item.id}"}= item.body This stuff is fun! Now, nesting is taken care of in Haml via whitespace. ERB <div id='content'> <div class='left column'> <h2>Welcome to our site!</h2> <p><%= print_information %></p> </div> <div class="right column"> <%= render :partial => "sidebar" %> </div> </div> Haml #content .left.column %h2 Welcome to our site! %p= print_information .right.column = render :partial => "sidebar"

.html.erb v/s .html.haml

What is it?

Haml takes your gross, ugly templates and replaces them with veritable Haiku. Haml is the next step in generating views in your Rails application. Haml is a refreshing take that is meant to free us from the shitty templating languages we have gotten used to. Haml is based on one primary principle. Markup should be beautiful. However, its not beauty for beauty’s sake. Unspace Interactive and several other professional Rails shops use Haml exclusively for every one of their projects. In fact, it was created for use in highly productive environments. The beauty makes you faster. Haml is a real solution to a real problem. Stop using the slow, repetitive, and annoying templates that you don’t even know how much you hate yet. Try something new — make templates fun and beautiful again! If you sit down and try using Haml, you will learn it within 20 minutes.

Haml

#profile .left.column #date= print_date #address= current_user.address .right.column #email= current_user.email #bio= current_user.bio

ERB

<div id="profile"> <div class="left column"> <div id="date"><%= print_date %></div> <div id="address"><%= current_user.address %></div> </div> <div class="right column"> <div id="email"><%= current_user.email %></div> <div id="bio"><%= current_user.bio %></div> </div> </div>