Atlanta Ruby Users Group (AtlRug) - January 2008 - Haml and Sass

Slide 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

Slide 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.

Slide 3: Recreating Haml • Original HTML document <div class="product"> <div class="name"> Foo </div> <div class="price"> $100.00 </div> <div class="updated_at"> 9 Jan 15:13 </div> <div class="actions"> <a href="/products/foo/purchases/new">buy</a> </div> </div>

Slide 4: Recreating Haml • RHTML version of the page <div class="product"> <div class="name"> <%= product.name %> </div> <div class="price"> <%= number_to_currency product.price %> </div> <div class="updated_at"> <%= product.to_s(:short) %> </div> <div class="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) %> <% end -%> </div> </div>

Slide 5: Recreating Haml • Dropping closing tags and block “end” <div class="product"> <div class="name"> <%= product.name %> <div class="price"> <%= number_to_currency product.price %> <div class="updated_at"> <%= product.to_s(:short) %> <div class="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) %>

Slide 6: Recreating Haml • Removing <> Brackets div class="product" div class="name" = product.name div class="price" = number_to_currency product.price div class="updated_at" = product.to_s(:short) div class="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)

Slide 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)

Slide 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)

Slide 9: Comparison <div class="product"> .product <div class="name"> .name <%= product.name %> = product.name </div> .price <div class="price"> = number_to_currency product.price <%= number_to_currency product.price %> .updated_at </div> = product.to_s(:short) <div class="updated_at"> .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="actions"> = 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)

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

Slide 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>”

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

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

Slide 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>

Slide 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>

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

Slide 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>

Slide 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.

Slide 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; }

Slide 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; }

Slide 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

Slide 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; }

Slide 23: Performance Haml 1.7.2 ERB

Slide 24: Performance Haml ERB Erubis Markaby

Slide 25: Performance Haml ERB Erubis

Slide 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