HAML and SASS
Shanghai on Rails – 1st edition
Maxime Guilbot – maxime@ekohe.com
1

HAML and SASS
Wikipedia says:
HAML (XHTML Abstraction Markup
Language) is a markup language that is
used to cleanly and simply describe the
XHTML of any web document without
the use of traditional inline coding.
http://haml.hamptoncatlin.com/
2

What about RHTML?
3

<div class=\"property_item<%= ' sponsored' if property.sponsored %>\" id=\"property_<%= property.id %>\">
<div class=\"property_title\">
<span style=\"float:right;\">
<b><%= property_price(property) %></b>
<% if property.sell? -%>
&nbsp;<%= link_to \" #{currency(property)}#{property.payment_per_month.to_i}\", finance_path
(:action=>'mortgage_calculator', :surface=>property.surface, :price_per_m2=>property.price_per_m2), :target=>'_blank' %>
<% end -%>
</span>
<% if (logged_in? and can_edit_property(property)) or (somebody_logged_in? and params[:action]==\"history\") -%>
<%= check_box_tag \"property_#{property.id}\", \"1\", false, :class => \"property_selector\" %>
<% end %>
<a href=\"<%= property_path(property)+(@form ? @form.to_query_string('', :form) : '') %>\" target=\"_blank\"><b><%= h(property.name) %></
b> / <%= h(property.district.name) %><%= h(property.address) %> (<%= h(property.property_type.name) %>)</a>
<% if logged_in? and can_edit_property(property)%>
<%= link_to(image_tag(\"/images/icons/edit.png\"), edit_property_path(property), :target => \"_blank\") %>
<%= link_to(image_tag(\"/images/icons/destroy.png\"), property_path(property)+(@form ? @form.to_query_string('', :form) : ''), :confirm
=> ' ', :method => :delete ) %>
<% end %>
RHTML
<% if params[:action]==\"history\" -%>
<%= link_to_remote \" \", :url => delete_history_property_path(property), :confirm => \" ?\", :method => :delete %>
<% end -%>
</div>
<div class=\"property_details\">
<div class=\"property_image\">
<%
can be evil...
pictures_count=property.property_pictures_count+property.property_floor_maps_count
if pictures_count==0 && property.property_videos_count>0 -%>
<%= video_player(url_for_file_column(property.property_video, :file)) %>
<% elsif pictures_count>0
pictures=property.property_pictures + property.property_floor_maps
-%>
<%= link_to image_tag(url_for_file_column(pictures.first, :file, 'thumb'), :alt=>'', :id=>\"property_picture_#
{property.id}\", :target => \"_blank\"), property_path(property)+(@form ? @form.to_query_string('', :form) : '') %>
<% if pictures.length>1
pictures[0, 3].each do |p| -%>
<%= link_to image_tag(url_for_file_column(p, :file, 'small'), :alt=>''), 'javascript:void
(0)', :onclick=>\"change_property_picture(#{property.id}, '#{url_for_file_column(p, :file, 'thumb')}');\" %>
<% end
end -%>
<% else -%>
<%= link_to(image_tag('no_photo.png', :alt=>' '), property_path(property), :target => \"_blank\") %>
<% end -%>
</div>
<div class=\"property_info\">
<span class=\"agency_logo\"><%= link_to (agency_logo(property.agency, 'small')), agency_path(property.agency) %></span>
<table>
<tr>
<td style=\"width:80px;\"> / / </td>
<td><%= property_rooms(property) %></td>
</tr>
<tr>
<td> </td>
<td><%= property.surface %> </td> 4

This in RHTML...
5

becomes this in HAML!
2 spaces!
6

How to use HAML?
• Install the plugin
./script/plugin install svn://hamptoncatlin.com/haml/trunk haml
7

How to use HAML?
• Rename your views - .rhtml +.haml
8

How to use HAML?
• Enjoy the delete key!
9

HAML is...
• sexy
• well-indented
• clear
• fast to write
• the next step in generating views in your
Rails application
10

Concept
Slower
Abstract Fast Development
Execution
Faster
Concrete Slow Development
Execution
11

Costs
Cost
Time
Slower to Develop
Faster to Develop
12

HAML adds more abstraction,
so it should be slower on
execution...
How much does that cost?
13

“Haml 1.7 is now only
1.3x slower than ERB”
from HAML release notes
14

Let’s measure that!
15

Httperf
• httperf --port 8001 --server 127.0.0.1
--num-conns 300 --uri /
• We got:
• rhtml 16 ms / req
• haml 21 ms / req
• > HAML is 24 % slower than ERB in our example
16

SASS
17

#main
:background-color #f00
:width 98%
#main {
background-color: #f00;
width: 98% }
18

SASS
!main_color = #00ff00
#main
:color = !main_color
:p
:background-color = !main_color
:color #000000
19

Rails 2.0
.format.provider:
.html.haml
.html.erb
20

maxime@ekohe.com
21