Weitere ähnliche Inhalte Ähnlich wie Haml And Sass: Put your markup on a diet (20) Kürzlich hochgeladen (20) Haml And Sass: Put your markup on a diet2. (X)HTML is unwieldy
• Repetition
• Closing tags
• id and class everywhere
• Arbitrary formatting
• Indentation not enforced
• Hard to see the structure
• Accident-prone
2 5. CSS is not much better
• More repetition
• Nested Selectors
• padding-left, padding-right, etc.
• No consistent formatting
4 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. What is Sass?
• CSS compliment to Haml
• Nesting through indentation
• Named constants
• Calculated values
7 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. 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. 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. 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. 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. Drawbacks
• Another markup syntax to learn... but it’s easy.
• Ruby (on Rails) only... for now
• Speed... but it doesn’t matter
14