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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.