Haml And Sass: Put your markup on a diet

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

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 \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> <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 \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> <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

Haml And Sass: Put your markup on a diet

0 comments

Notes on slide 1

1 Favorite