What is Haml?
Haml is an abstraction markup language, a layer on top of HTML. It’s a way of writing more beautiful and faster markup.
With Haml,
- You avoid writing redundant code, like closing tags.
- You leverage your knowledge of CSS selectors.
- You write views faster.
Haml by Example
Now let’s look at an example of a basic structure,
|
|
!!! 5<br />%html %head %title my title %body #main %span#my-span my content |
|
This would render as:
|
|
<!DOCTYPE html> <html> <head> <title>my title</title> </head> <body> <div id='main'> <span id='my-span'>my content</span> </div> </body> </html> |
|
Whitespace is important to Haml, but it doesn’t matter if you use blanks or tabs as long as you’re consistent (me, I’m more of a space-guy).
Use % to create a tag,
| This Haml code |
|
Renders as |
|
|
|
|
You can add content to an element by indenting a level below,
| This Haml code |
|
Renders as |
|
|
|
|
Or by entering a space,
| This Haml code |
|
Renders as |
|
|
|
|
HTML tags are passed unmodified
| This Haml code |
|
Renders as |
|
|
|
|
|
<html> <body></body> </html> |
|
There are two ways of adding attributes: {} or ()
You can use the Ruby hash notation:
| This Haml code |
|
|
%link{:rel => 'stylesheet', :type => 'text/css', :href => '/css/styles.css'} |
|
| |
| Renders as |
|
|
<link href='/css/styles.css' rel='stylesheet' type='text/css' /> |
|
Or the parens notation, which is more HTML-ish:
| This Haml code |
|
|
%link(rel='stylesheet' type='text/css' href='/css/styles.css') |
|
| |
| Renders as |
|
|
<link href='/css/styles.css' rel='stylesheet' type='text/css' /> |
|
There’s a shortcut, using CSS selector syntax, for including IDs and/or classes to an element. As in CSS, use the # character for the ID and the dot for a class:
| This Haml code |
|
Renders as |
|
|
#container %span.red text here |
|
|
|
|
<div id='container'> <span class='red'>text here</span> </div> |
|
As you can see the <div> element is implied when no tag was specified. These two lines would render the same:
| This Haml code |
|
Renders as |
|
|
%div#container #container |
|
|
|
|
<div id='container'></div><br /><div id='container'></div> |
|
For the Web Standardistas, Haml provides pretty much any DOCTYPE you’d need:
| This Haml code |
|
|
| |
| Renders as |
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <pre><!DOCTYPE html> |
|
