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

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

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

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

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

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (7)

Similaire à Haml And Sass: Put your markup on a diet

Similaire à Haml And Sass: Put your markup on a diet (20)

Dernier

Dernier (20)

Haml And Sass: Put your markup on a diet