Atlanta Ruby Users Group (AtlRug) - January 2008 - Haml and Sass
1. Haml
XHTML Abstraction Markup Language
“Any sufficiently complicated rhtml partial contains an
ad hoc, informally-specified, bug-ridden, implementation
of half of Haml.”
Dan Grigsby of railspikes.com
http://scribd.com/doc/978532
2. What is Haml?
• Haml is based on one primary principal.
Markup should be beautiful.
• ...it was created for use in highly productive
environments. The beauty makes you faster.
• Stop using the slow, repetitive, and annoying
templates that you don’t even know how
much you hate yet.
3. Recreating Haml
• Original HTML document
<div class=quot;productquot;>
<div class=quot;namequot;>
Foo
</div>
<div class=quot;pricequot;>
$100.00
</div>
<div class=quot;updated_atquot;>
9 Jan 15:13
</div>
<div class=quot;actionsquot;>
<a href=quot;/products/foo/purchases/newquot;>buy</a>
</div>
</div>
10. Haml Features
• Whitespace active
• Well-formatted markup
• DRY
• Follows CSS conventions
• Integrates with Ruby code
• Implements Rails templates with the .haml
extension
11. Using Haml
• Haml 1.8.0 was released on January 6, 2008
• gem install haml
• haml --rails path/to/app
• echo '.message Hello, World' | haml
# => “<div class='message'>Hello, World</div>”
12. Using Haml
• XML tags are specified with a %tagname
%one
%two
%three Hello, World
<one>
<two>
<three>Hello, World</three>
</two>
</one>
13. Using Haml
• Brackets {} represent a Ruby hash that is used for
specifying the attributes of an element.
%head{ :name => 'document_head' }
%script{ 'type' => quot;text/quot; + quot;javascriptquot;, :src => quot;javascripts/script_#{2 + 7}.jsquot; }
<head name='document_head'>
<script src='javascripts/script_9.js' type='text/javascript'></script>
</head>
14. Using Haml
• Square brackets [] use the dom_id and
dom_class methods to tag the element.
%div[@user]
%div[290] Hello!
<div class='user' id='user_15'>
<div class='fixnum' id='fixnum_581'>Hello!</div>
</div>
15. Using Haml
• . and # assign classes and ids, respectively.
%div#things
%span#rice Chicken Fried
%p.beans{ :food => 'true' } The magical fruit
%h1.class.otherclass#id La La La
<div id='things'>
<span id='rice'>Chicken Fried</span>
<p class='beans' food='true'>The magical fruit</p>
<h1 class='class otherclass' id='id'>La La La</h1>
</div>
16. Using Haml
• = is a shortcut for inserting Ruby code into an
element.
#hello_1= quot;<span>Hello</span>quot;
#hello_2=h quot;<span>Hello</span>quot;
<div id='hello_1'><span>Hello</span></div>
<div id='hello_2'><span>Hello</span></div>
17. Using Haml
• - designates a Ruby block that should not be outputted.
(notice no need for end)
- (12...14).each do |i|
%p= i
%p See, I can count!
%p.array
- if [].blank?
%span.blank The array was blank.
- else
%span.notblank The array was not blank.
<p>12</p>
<p>13</p>
<p>See, I can count!</p>
<p class='array'>
<span class='blank'>The array was blank.</span>
</p>
18. Sass
Syntactically Awesome StyleSheets
• Basically just another way of writing CSS.
• Like Haml, it is designed to be very DRY
and help you write CSS faster.
• Supports nested selectors, constants, and
simple arithmetic.
19. Using Sass
• Basic example of nested rules
#main p #main p {
:color #0f0 color: #0f0;
:width 97% width: 97%; }
.redbox #main p .redbox {
:background-color #f00 background-color: #f00;
:color #000 color: #000; }
20. Using Sass
• Simple Sass can equal complex CSS
#main #main {
:width 97% width: 97%; }
p, div #main p, #main div {
:font-size 2em font-size: 2em; }
a #main p a, #main div a {
:font-weight bold font-weight: bold; }
pre #main pre {
:font-size 3em font-size: 3em; }
26. Haml in the Wild
• MyStock mystock.com
• Rails 2 with Haml trunk
• Grand Harmony Spa grandharmonyspa.com
or 029a630.netsolhost.com (until DNS fixed)
• Generated with StaticMatic using Haml 1.7.2