Presentation by Andrew Bennett on Haml and Sass at the Atlanta Ruby Users Group on January 9, 2008 (http://ruby.meetup.com/83/calendar/6903097/).

1. Haml
XHTML Abstraction Markup Language
“Any sufficiently complicated rhtml partial contains an
ad hoc, informally-specified, bug-ridden, implementation
of half of Haml.”
Dan Grigsby of railspikes.com
http://scribd.com/doc/978532

2. What is Haml?
• Haml is based on one primary principal.
Markup should be beautiful.
• ...it was created for use in highly productive
environments. The beauty makes you faster.
• Stop using the slow, repetitive, and annoying
templates that you don’t even know how
much you hate yet.

3. Recreating Haml
• Original HTML document
<div class=quot;productquot;>
<div class=quot;namequot;>
Foo
</div>
<div class=quot;pricequot;>
$100.00
</div>
<div class=quot;updated_atquot;>
9 Jan 15:13
</div>
<div class=quot;actionsquot;>
<a href=quot;/products/foo/purchases/newquot;>buy</a>
</div>
</div>

4. Recreating Haml
• RHTML version of the page
<div class=quot;productquot;>
<div class=quot;namequot;>
<%= product.name %>
</div>
<div class=quot;pricequot;>
<%= number_to_currency product.price %>
</div>
<div class=quot;updated_atquot;>
<%= product.to_s(:short) %>
</div>
<div class=quot;actionsquot;>
<%= link_to 'buy', new_purchase_product_url(product) %>
<% if product.owners.find_by_user_id(session[:user_id]) -%>
<%= link_to 'sell', new_sale_product_url(product) %>
<% end -%>
</div>
</div>

5. Recreating Haml
• Dropping closing tags and block “end”
<div class=quot;productquot;>
<div class=quot;namequot;>
<%= product.name %>
<div class=quot;pricequot;>
<%= number_to_currency product.price %>
<div class=quot;updated_atquot;>
<%= product.to_s(:short) %>
<div class=quot;actionsquot;>
<%= link_to 'buy', new_purchase_product_url(product) %>
<% if product.owners.find_by_user_id(session[:user_id]) -%>
<%= link_to 'sell', new_sale_product_url(product) %>

6. Recreating Haml
• Removing <> Brackets
div class=quot;productquot;
div class=quot;namequot;
= product.name
div class=quot;pricequot;
= number_to_currency product.price
div class=quot;updated_atquot;
= product.to_s(:short)
div class=quot;actionsquot;
= link_to 'buy', new_purchase_product_url(product)
- if product.owners.find_by_user_id(session[:user_id])
= link_to 'sell', new_sale_product_url(product)

7. Recreating Haml
• CSS shortcuts
div.product
div.name
= product.name
div.price
= number_to_currency product.price
div.updated_at
= product.to_s(:short)
div.actions
= link_to 'buy', new_purchase_product_url(product)
- if product.owners.find_by_user_id(session[:user_id])
= link_to 'sell', new_sale_product_url(product)

8. Recreating Haml
• Drop the div tags (this is valid Haml)
.product
.name
= product.name
.price
= number_to_currency product.price
.updated_at
= product.to_s(:short)
.actions
= link_to 'buy', new_purchase_product_url(product)
- if product.owners.find_by_user_id(session[:user_id])
= link_to 'sell', new_sale_product_url(product)

9. Comparison
<div class=quot;productquot;> .product
<div class=quot;namequot;> .name
<%= product.name %> = product.name
</div> .price
<div class=quot;pricequot;> = number_to_currency product.price
<%= number_to_currency product.price %> .updated_at
</div> = product.to_s(:short)
<div class=quot;updated_atquot;> .actions
<%= product.to_s(:short) %> = link_to 'buy', new_purchase_product_url(product)
</div> - if product.owners.find_by_user_id(session[:user_id])
<div class=quot;actionsquot;> = link_to 'sell', new_sale_product_url(product)
<%= link_to 'buy', new_purchase_product_url(product) %>
<% if product.owners.find_by_user_id(session[:user_id]) -%>
Alternative syntax:
<%= link_to 'sell', new_sale_product_url(product) %>
<% end -%>
.product
</div>
.name= product.name
</div>
.price= number_to_currency product.price
.updated_at= product.to_s(:short)
.actions
= link_to 'buy', new_purchase_product_url(product)
- if product.owners.find_by_user_id(session[:user_id])
= link_to 'sell', new_sale_product_url(product)

10. Haml Features
• Whitespace active
• Well-formatted markup
• DRY
• Follows CSS conventions
• Integrates with Ruby code
• Implements Rails templates with the .haml
extension

11. Using Haml
• Haml 1.8.0 was released on January 6, 2008
• gem install haml
• haml --rails path/to/app
• echo '.message Hello, World' | haml
# => “<div class='message'>Hello, World</div>”

12. Using Haml
• XML tags are specified with a %tagname
%one
%two
%three Hello, World
<one>
<two>
<three>Hello, World</three>
</two>
</one>

13. Using Haml
• Brackets {} represent a Ruby hash that is used for
specifying the attributes of an element.
%head{ :name => 'document_head' }
%script{ 'type' => quot;text/quot; + quot;javascriptquot;, :src => quot;javascripts/script_#{2 + 7}.jsquot; }
<head name='document_head'>
<script src='javascripts/script_9.js' type='text/javascript'></script>
</head>

14. Using Haml
• Square brackets [] use the dom_id and
dom_class methods to tag the element.
%div[@user]
%div[290] Hello!
<div class='user' id='user_15'>
<div class='fixnum' id='fixnum_581'>Hello!</div>
</div>

15. Using Haml
• . and # assign classes and ids, respectively.
%div#things
%span#rice Chicken Fried
%p.beans{ :food => 'true' } The magical fruit
%h1.class.otherclass#id La La La
<div id='things'>
<span id='rice'>Chicken Fried</span>
<p class='beans' food='true'>The magical fruit</p>
<h1 class='class otherclass' id='id'>La La La</h1>
</div>

16. Using Haml
• = is a shortcut for inserting Ruby code into an
element.
#hello_1= quot;<span>Hello</span>quot;
#hello_2=h quot;<span>Hello</span>quot;
<div id='hello_1'><span>Hello</span></div>
<div id='hello_2'>&lt;span&gt;Hello&lt;/span&gt;</div>

17. Using Haml
• - designates a Ruby block that should not be outputted.
(notice no need for end)
- (12...14).each do |i|
%p= i
%p See, I can count!
%p.array
- if [].blank?
%span.blank The array was blank.
- else
%span.notblank The array was not blank.
<p>12</p>
<p>13</p>
<p>See, I can count!</p>
<p class='array'>
<span class='blank'>The array was blank.</span>
</p>

18. Sass
Syntactically Awesome StyleSheets
• Basically just another way of writing CSS.
• Like Haml, it is designed to be very DRY
and help you write CSS faster.
• Supports nested selectors, constants, and
simple arithmetic.

19. Using Sass
• Basic example of nested rules
#main p #main p {
:color #0f0 color: #0f0;
:width 97% width: 97%; }
.redbox #main p .redbox {
:background-color #f00 background-color: #f00;
:color #000 color: #000; }

20. Using Sass
• Simple Sass can equal complex CSS
#main #main {
:width 97% width: 97%; }
p, div #main p, #main div {
:font-size 2em font-size: 2em; }
a #main p a, #main div a {
:font-weight bold font-weight: bold; }
pre #main pre {
:font-size 3em font-size: 3em; }

21. Using Sass
• Constants and simple arithmetic
!bg_color = #0f0 #container {
!main_width = 700px width: 800px; }
!side_width = 100px #container #main {
background-color: #00ff00;
#container color: #20ff20;
:width = !main_width + !side_width width: 700px; }
#main #container #side {
:background-color = !bg_color width: 100px; }
:color = !bg_color + 32
:width = !main_width
#side
:width = !side_width

22. Using Sass
• Advanced Sass with parent selectors
a{
a
color: #00f; }
:color #00f
a.disabled {
&.disabled
color: #999 !important; }
:color #999 !important
a:link, a:active, a:visited {
&:link, &:active, &:visited
text-decoration: none; }
:text-decoration none
a:link span.hidden, a:active
span.hidden
span.hidden, a:visited span.hidden {
:display none
display: none; }
&:visited
a:visited {
:color #00c
color: #00c; }
&:hover
a:hover {
:text-decoration underline
text-decoration: underline; }

23. Performance
Haml 1.7.2
ERB

24. Performance
Haml
ERB
Erubis
Markaby

25. Performance
Haml
ERB
Erubis

26. Haml in the Wild
• MyStock mystock.com
• Rails 2 with Haml trunk
• Grand Harmony Spa grandharmonyspa.com
or 029a630.netsolhost.com (until DNS fixed)
• Generated with StaticMatic using Haml 1.7.2