Haml Walkthrough: ERB

Now we’re going to walk you through the exact same process with which Haml was created. A well-formatted bit of HTML was changed step-by-step until Haml was born.

Let’s start with an example using ERB. It’s a pretty standard template you might find in any Ruby project. Don’t panic if you aren’t a Rubyist—it’s a straightforward example.

haml/haml_e1.html
 
<div​ id=”products”​>
 
<%- @products.each do |product| %>
 
<div​ class=”product” id=”product_<%= product.id %​>​”>
 
<div​ class=”name”​>​​<%= product.name %>​​</div>
 
<div​ class=”price”​>​​<%= product.price %>​​</div>
 
</div>
 
<% end %>
 
</div>

Executing this would print out each of the products in @products and assign each one a custom ID like product_23 ...

Get Pragmatic Guide to Sass now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.