Haml And Sass: Put your markup on a diet
Upcoming SlideShare
Loading in...5
×
 

Haml And Sass: Put your markup on a diet

on

  • 5,703 views

Presentation I gave at BarCamp Nashville about Haml and Sass.

Presentation I gave at BarCamp Nashville about Haml and Sass.

Statistics

Views

Total Views
5,703
Views on SlideShare
5,675
Embed Views
28

Actions

Likes
1
Downloads
63
Comments
0

3 Embeds 28

http://www.slideshare.net 19
http://rubython.blogspot.com 5
http://davidsidlinger.com 4

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

Haml And Sass: Put your markup on a diet Haml And Sass: Put your markup on a diet Presentation Transcript

  • Haml and Sass Put your markup on a diet 1
  • (X)HTML is unwieldy • Repetition • Closing tags • id and class everywhere • Arbitrary formatting • Indentation not enforced • Hard to see the structure • Accident-prone 2
  • Case in point 3
  • Case in point 3
  • CSS is not much better • More repetition • Nested Selectors • padding-left, padding-right, etc. • No consistent formatting 4
  • Haml and Sass to the rescue! 5
  • What is Haml? • XHTML Abstraction Markup Language • Markup that describes XHTML • Nesting through indentation (like Python) • Convenient shortcuts for common elements and attributes • Guiding principle: Markup should be beautiful 6
  • What is Sass? • CSS compliment to Haml • Nesting through indentation • Named constants • Calculated values 7
  • Examples 8
  • XHTML <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;> <html lang=”en” xml:lang=”en” xmlns=”http://www.w3.org/1999/xhtml”> <head> <title>XHTML Example</title> </head> <body> <div id=”container”> <div id=”header”> <h1 class=”pagetitle”>XHTML Example</h1> </div> <div id=”content”> <span class=”announcement”>BarCamp is coming to Nashville on August 18th!</span> <p class=”normaltext”>Lorem ipsum...</p> </div> <div id=”footer”> <span class=”copyright”>(c) 2007 Example Industries</span> </div> </div> </body> </html> 9
  • XHTML (even uglier, but legal) <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;> <html lang=”en” xml:lang=”en” xmlns=”http://www.w3.org/1999/xhtml”><head> <title>XHTML Example</title></head> <body> <div id=”container”><div id=”header”> <h1 class=”pagetitle”>XHTML Example</h1> </div> <div id=”content”> <span class=”announcement”>BarCamp is coming to Nashville on August 18th!</span><p class=”normaltext”>Lorem ipsum... </p> </div> <div id=”footer”><span class=”copyright”> (c) 2007 Example Industries</span></div> </div> </body> </html> 10
  • Haml !!! %html{ :lang => ”en”, ‘xml:lang’ => ”en”, :xmlns => ”http://www.w3.org/1999/xhtml” } %head %title Haml Example %body #container #header %h1.pagetitle Haml Example #content %span.announcement BarCamp is coming to Nashville on August 18th! %p.normaltext Lorem ipsum... #footer %span.copyright (c) 2007 Example Industries 11
  • CSS body { font-family: Helvetica, Arial, sans-serif; font-size: .8em; background-color: #ffffff; } a{ text-decoration: none; color: #00ff00; } a:hover { text-decoration: underline; color: #0000ff; } #container { width: 760px; } #header { border-bottom: 1px solid #000000; border-top: 1px solid #000000; background-color: #ff0000; } #header h1 { font-size: 1.5em; font-weight: bold; } #footer { font-size: .5em; background-color: #ff0000; } .copyright { font-style: italic; } 12
  • Sass !highlight = #ff0000 !headborder = #000000 body :font :family Helvetica, Arial, sans-serif :size .8em :background-color #ffffff a :text-decoration none :color #00ff00 &:hover :text-decoration underline :color #0000ff #container :width 760px #header :border :bottom 1px solid !headborder :top 1px solid !headborder :background-color !highlight h1 :font :size 1.5em :weight bold #footer :font-size .5em :background-color: !highlight .copyright :font-style italic 13
  • Drawbacks • Another markup syntax to learn... but it’s easy. • Ruby (on Rails) only... for now • Speed... but it doesn’t matter 14
  • Learn more http://haml.hamptoncatlin.com 15