Haml And Sass: Put your markup on a diet
16
Haml and Sass Put your markup on a diet 1
-
Upload
davidsidlinger -
Category
Technology
-
view
3.309 -
download
3
description
Presentation I gave at BarCamp Nashville about Haml and Sass.
Transcript of Haml And Sass: Put your markup on a diet
Haml and SassPut 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 point3
Case in point3
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
CSSbody { 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 #ffffffa :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
