HAML is a markup language that produces HTML. It aims to have cleaner syntax than HTML and makes markup feel more like coding. Some key features of HAML include using %tags for elements, Ruby hashes for attributes, shortcuts for CSS ids and classes, and indentation to denote nesting. HAML also allows embedding Ruby code and eliminating <% %> tags through features like - for conditionals and blocks. To use HAML in Rails, add the 'haml' gem and integrate the views.
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="oxiclean.com">Read more</a>
</div>
HAML:
#article
%h2 OxiClean tackles household stains
%span.author Billy Mays
%p It boots your detergent power
%a{:href => "oxiclean.com"} Read more
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. %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. 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. CSS id and class shortcuts
%h2#title Rails in Action
<h2 id=“title”>Rails in Action</h2>
%span.author Steve Klabnik
<span class="author">Steve Klabnik</span>
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>
13. - Indicates a conditional or block
ERB:
<% if @ticket.comments.exists? %>
<%= render @ticket.comments.select(&:persisted?) %>
<% else %>
<p>There are no comments for this ticket.</p>
<% end %>
HAML:
- if @ticket.comments.exists?
= render @ticket.comments.select(&:persisted?)
- else
%p There are no comments for this ticket.
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
IntroductionMy talk today is HAML in 5 minutesHow many of you know what haml is?Haml is a templating markup language similar to Ruby ERB that you can use to code the views in your Rails Apps.Unlike ERB which basically just evaluates Ruby in between whatever text is around it – whether it’s HTML or CSS or JSON or whatever, HAML is abstracted out a little more actually replaces how you even write your html tags.Just like you have SASS or LESS for CSS, HAML has a syntax that ultimately compiles into HTML. It’s designed to make your life as a Rails developer easier.
The makers of HAML decided that markup should be beautiful.They wanted something that was concise, elegant, and clear. What they came up with was something that borrowed a lot of style from Ruby code.For those of you that don’t like the context switch between Ruby code in your models and controllers and HTML and ERB in your views, you might really welcome HAMLSo what does HAML look like?
Here is an HTML snippet at the top and how this would be written in HAML.Designed to be very easy to read. Almost intuitive to understand.Just looking at it you can probably pick out some patterns that make HAML work.#article something, looks like an h2, span, maybe that’s a css class name, paragraph, anchor tag with an href attribute
No closing tags.Whatever is to the right of the %tagname becomes the content of that tagCan even create custom tags if you were marking up an XML document or were using a custom namespace
Just like Ruby, pass in the attributes for your HTML tags as hashes
Since css id and class are used so frequently there’s even a shortcut for them.You can even combine them and apply both at the same time or put a hash on the end and pass in even more attributes.
Also since DIV tags are used so frequently in HTML, they are the default tag.Rather than writing %div#content, simply write #content
Another really important aspect of HAML is that indentation matters!This is how you get around having to write closing tags.To add a child element, indent two spaces, just like Ruby. Here’s an example of how that looks --- notice there’s an anchor tag on the last list-item so it is indented another line
Okay so this looks great, but those are the basics, lets get to some more complicated stuff....Evaluating Ruby with HAML
For the next few slides I’m going to compare ERB to HAML so you can see the similarities and how you might go about converting your views to HAML.TIP for converting to HAML: keep hitting the delete key.So here is how we can evaluate ruby in HAML – use the equals sign after a tag to tell HAML to evaluate what is to the right.Here are some examples from our Ticketee project.In the second example, you can do string interpolation without the equals sign.
And to get even more complicated, lets go over how to do blocks in HAML – and how to get rid of all those ERB end tags cluttering your code.
Another example from Ticketee.Use a hypen at the beginning of the line to indicate it’s a block.Notice the equals sign all by itself for the render statement. You can do that without preceding it with a tag name.And of course the best thing is no <% end %> statements. I’m sure all of you have questioned why anyone would ever think a 9 character closing tag with no less than 4 special characters that require hitting the shift key was a good idea. Well suffer no more.
Here’s an example with a loop.Simple!
Well it wouldn’t be Rails worthy if it wasn’t extremely easy to add to your project.
Add gem haml to your gemfile.And boom, you’re up and running.Anything in your views that have a .html.haml file extension will be compiled into HTML.
