2. What is Haml?
• A markup language
• An alternative to erb / RHTML for Rails +
Merb
• rubygem or rails plugin
3. Haml has principles
• Markup should be beautiful
• Markup should be DRY
• Markup should be well-indented
• XHTML structure should be clear
Beautiful - READABLE!
DRY - in XHTML elements are named twice, ERB adds even more repetition. HAML relies on
indentation to determine where elements and blocks of code begin and end-> smaller templates +
cleaner code
well indented - ERB doesn’t encourage well-indented code. Haml indents properly all the time
XHTML structure should be clear - guaranteed by the first 3
4. Syntax
%tag content <tag>content</tag>
The percent character is placed at the beginning of a line. It’s followed immediately by the name of
an element, then the text to be rendered inside the element
5. Syntax
<h1>Haml should be</h1>
%h1 Haml should be
<ul>
%ul
<li>Beautiful</li>
%li Beautiful
<li>DRY</li>
%li DRY
<li>Well-indented</li>
%li Well-indented
</ul>
nesting is achieved through indentation
6. Attributes
<p class='bio'>
%p{:class => quot;bioquot;}
This paragraph has class
This paragraph has class
</p>
<p id='bio'>
%p{:id => quot;bioquot;}
This paragraph has identity
This paragraph has identity
</p>
A Ruby hash is used for specifying the attributes of an element. It is literally evaluated as a Ruby
hash, so logic will work in it and local variables may be used
A Ruby method call that returns a hash can be substituted for the hash contents
multiple hashes, separated by commas can be used
7. class and id shortcuts
<p class='bio'>
%p.bio
This paragraph has class
This paragraph has class
</p>
<p id='bio'>
%p#bio
This paragraph has identity
This paragraph has identity
</p>
borrowed from CSS
8. Implicit <div>
<div class='class'>
<div id='id'>
.class <p>
#id I'm wrapped in two divs
%p </p>
I'm wrapped in two divs </div>
</div>
If you only define a class and/or id using the . or # syntax, a div element is automatically used
9. Haml -vs- HTML
!!! <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0
%html{ html_attrs } Transitional//ENquot; quot;http://www.w3.org/TR/
%head xhtml1/DTD/xhtml1-transitional.dtdquot;>
%title Haml syntax demo <html lang='en-US' xml:lang='en-US'
%body xmlns='http://www.w3.org/1999/xhtml'>
#content <head>
%h1 Haml should be: <title>Haml syntax demo</title>
%ul.principles </head>
%li Beautiful <body>
%li DRY <div id='content'>
%li Well-indented <h1>Haml should be:</h1>
%li Clearly XHTML <ul class='principles'>
#footer <li>Beautiful</li>
%span.author Ciaran <li>DRY</li>
<li>Well-indented</li>
<li>Clearly XHTML</li>
</ul>
</div>
<div id='footer'>
<span class='author'>Ciaran</span>
</div>
</body>
</html>
!!! generates doctype
!!! XML generates XML prolog
html_attrs is a Haml Helper, Returns a hash containing default assignments for the xmlns and
xml:lang attributes of the html HTML element
10. Ruby evaluators
- for article in @articles
.post
.date
%h3= h article.publication_date.strftime(quot;%d %m %Yquot;)
.article
%h3= link_to(h(article.title), article)
~article.body
= is followed by Ruby code, which is evaluated and the output inserted into the document as plain
text
- hyphen character makes the text following it into quot;silent scriptquot;: Ruby script that is evaluated, but
not output
for loop (+ all Ruby blocks) are automatically closed, based on indentation
~ acts like = except that it preserves the whitespace
11. Haml in rails projects
rails 2.0 uses $view.html.erb , for haml views just replace erb with haml
14. SASS syntax
#main p
#main p {
:color #00ff00
color: #00ff00;
:width 97%
width: 97%; }
#main p .redbox {
.redbox
background-color: #ff0000;
:background-color #ff0000
color: #000000; }
:color #000000
Rules can also be nested within each other. This signifies that the inner rule’s selector is a child of
the outer selector
15. SASS Constants
!main_color = #00ff00
#main {
#main color: #00ff00; }
:color = !main_color #main p {
:p background-color: #00ff00;
:background-color = !main_color color: #000000; }
:color #000000
support for setting document-wide constants. They‘re set using an exclamation mark followed by
the name, an equals sign, and the value
16. make_resourceful
• rails plugin
• DRYs up controller code
• http://railscasts.com/episodes/92
Show some code, it’s cool, but depending on how much customisation you do it might be better to
use the standard RESTful controller
