Haml And Sass: Put your markup on a diet

3,842 views

Published on

Presentation I gave at BarCamp Nashville about Haml and Sass.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,842
On SlideShare
0
From Embeds
0
Number of Embeds
51
Actions
Shares
0
Downloads
67
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Haml And Sass: Put your markup on a diet

  1. 1. Haml and Sass Put your markup on a diet 1
  2. 2. (X)HTML is unwieldy • Repetition • Closing tags • id and class everywhere • Arbitrary formatting • Indentation not enforced • Hard to see the structure • Accident-prone 2
  3. 3. Case in point 3
  4. 4. Case in point 3
  5. 5. CSS is not much better • More repetition • Nested Selectors • padding-left, padding-right, etc. • No consistent formatting 4
  6. 6. Haml and Sass to the rescue! 5
  7. 7. 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
  8. 8. What is Sass? • CSS compliment to Haml • Nesting through indentation • Named constants • Calculated values 7
  9. 9. Examples 8
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. Drawbacks • Another markup syntax to learn... but it’s easy. • Ruby (on Rails) only... for now • Speed... but it doesn’t matter 14
  16. 16. Learn more http://haml.hamptoncatlin.com 15

×