Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Haml in 5 minutes


Published on

Quick overview of HAML for templating views in Ruby on Rails.

Published in: Technology
  • Thanks Cameron, I really didn't want to "get" Haml but you've gone and made it easy and look all nice.
    Are you sure you want to  Yes  No
    Your message goes here

Haml in 5 minutes

  1. 1. HAML in 5 minutes Cameron Hill
  2. 2. markup should be beautiful
  3. 3. HTML:<div id="article"> <h2>OxiClean tackles household stains</h2> <span class="author">Billy Mays</span> <p>It boosts your detergent power</p> <a href="">Read more</a></div>HAML:#article %h2 OxiClean tackles household stains Billy Mays %p It boots your detergent power %a{:href => ""} Read more
  4. 4. Four Simple Rules• %tag creates a <tag></tag> element• HTML attributes as Ruby hashes• CSS selector shortcuts & implicit divs• Nested elements: Indentation matters
  5. 5. %tag creates a <tag></tag> element%div Some content <div>Some content</div>%h2 Breaking News <h2>Breaking News</h2>%br <br/>%widget <widget></widget>
  6. 6. HTML attributes as hashes%a{ :href => “/article/4”, :target=> “_blank” } Read more<a href=“/article/4” target=“_blank”>Read more</a>%ul{ :id => "projects", :class => "secondary" }<ul id=“projects” class=“secondary”></ul>
  7. 7. CSS id and class shortcuts%h2#title Rails in Action<h2 id=“title”>Rails in Action</h2> Steve Klabnik<span class="author">Steve Klabnik</span>
  8. 8. Implicit DIV tags#content This is my content<div id="content">This is my content</div>.article This is my content<div class=”article">This is my content</div>
  9. 9. Nested elements: Indentation mattersHAML:%ul %li Mayonnaise %li Mustard %li %a{ :href => “” } KetchupHTML:<ul> <li>Mayonnaise</li> <li>Mustard</li> <li><a href=“”>Ketchup</a></li>
  10. 10. Evaluating Ruby with HAML
  11. 11. = evaluates a Ruby expression (like <%= %>)ERB:<h2><%= @ticket.title %></h2>HAML:%h2= @ticket.titleERB:<span>Created by <%= %></span>HAML:%span= “Created by #{}”%span Created by #{}
  12. 12. Blocks in HAML -or-Death to <% end %>
  13. 13. - Indicates a conditional or blockERB:<% if @ticket.comments.exists? %> <%= render %><% else %> <p>There are no comments for this ticket.</p><% end %>HAML:- if @ticket.comments.exists? = render else %p There are no comments for this ticket.
  14. 14. ERB:<% @ticket.assets.each do |asset| %> <p> <%= link_to File.basename(asset.file_name), asset.url %> </p><% end %>HAML:- @ticket.assets.each do |asset| %p= link_to File.basename(asset.file_name), asset.url
  15. 15. I’m sold!How do I use it in Rails?
  16. 16. gem “haml”
  17. 17.
  18. 18. Thanks! @cameronbot