Atlanta Ruby Users Group (AtlRug) - January 2008 - Haml and Sass
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 4,077 views

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/).

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/).

Statistics

Views

Total Views
4,077
Views on SlideShare
4,063
Embed Views
14

Actions

Likes
0
Downloads
56
Comments
0

3 Embeds 14

http://rubython.blogspot.com 10
http://www.slideshare.net 3
http://wildfire.gigya.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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
  • 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.
  • 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>
  • 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>
  • 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) %>
  • 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)
  • 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)
  • 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)
  • 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)
  • Haml Features • Whitespace active • Well-formatted markup • DRY • Follows CSS conventions • Integrates with Ruby code • Implements Rails templates with the .haml extension
  • 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>”
  • Using Haml • XML tags are specified with a %tagname %one %two %three Hello, World <one> <two> <three>Hello, World</three> </two> </one>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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>
  • 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.
  • 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; }
  • 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; }
  • 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
  • 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; }
  • Performance Haml 1.7.2 ERB
  • Performance Haml ERB Erubis Markaby
  • Performance Haml ERB Erubis
  • 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