Your SlideShare is downloading. ×
0
Haml and Sass
 Put your markup on a diet




                             1
(X)HTML is unwieldy
  •   Repetition

      •   Closing tags

      •   id and class everywhere

  •   Arbitrary formattin...
Case in point
                3
Case in point
                3
CSS is not much better

  •   More repetition

      •   Nested Selectors

      •   padding-left, padding-right, etc.

  ...
Haml and Sass to the rescue!
                               5
What is Haml?

•   XHTML Abstraction Markup Language

•   Markup that describes XHTML

•   Nesting through indentation (li...
What is Sass?

•   CSS compliment to Haml

•   Nesting through indentation

•   Named constants

•   Calculated values



...
Examples



           8
XHTML
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-t...
XHTML (even uglier, but legal)
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.o...
Haml
!!!
%html{ :lang => ”en”, ‘xml:lang’ => ”en”, :xmlns => ”http://www.w3.org/1999/xhtml” }
  %head
    %title Haml Exam...
CSS
body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: .8em;
  background-color: #ffffff;
}
a{
  text-decora...
Sass
!highlight = #ff0000
!headborder = #000000

body
  :font
     :family Helvetica, Arial, sans-serif
     :size .8em
  ...
Drawbacks


•   Another markup syntax to learn... but it’s easy.

•   Ruby (on Rails) only... for now

•   Speed... but it...
Learn more


http://haml.hamptoncatlin.com




                                15
Upcoming SlideShare
Loading in...5
×

Haml And Sass: Put your markup on a diet

3,343

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,343
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
65
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×