Pragmatic Guide to Sass 3

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 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 (where the product’s ...