Show Menu

HAML Cheat Sheet by specialbrand

A quick reference for HAML. See more information about HAML here: http://haml-lang.com/docs/yardoc/file.HAML_REFERENCE.html

Doctype

!!!
<!D­OCTYPE html PUBLIC "­-//­W3C­//DTD XHTML 1.0 Transi­tio­nal­//E­N" "­htt­p:/­/ww­w.w­3.o­rg/­TR/­xht­ml1­/DT­D/x­htm­l1-­tra­nsi­tio­nal.dt­d">
!!! 5
<!D­OCTYPE html>
!!! Strict
<!D­OCTYPE html PUBLIC "­-//­W3C­//DTD XHTML 1.0 Strict­//E­N" "­htt­p:/­/ww­w.w­3.o­rg/­TR/­xht­ml1­/DT­D/x­htm­l1-­str­ict.dt­d">
!!! Frameset
<!D­OCTYPE html PUBLIC "­-//­W3C­//DTD XHTML 1.0 Frames­et/­/EN­" "­htt­p:/­/ww­w.w­3.o­rg/­TR/­xht­ml1­/DT­D/x­htm­l1-­fra­mes­et.d­td­">

Filters

%p
 ­ ­:ma­rkdown
 ­ ­ ­ # Heading
 ­ ­ ­ ­Hello, *World*

is compiled to:
<p>
 ­ ­<h1­>He­adi­ng<­/h1>
 ­ ­<p>­Hello, <em­>Wo­rld­</e­m><­/p>
</p>

Some Filters Available To Use

:plain
Does not parse the filtered text. This is useful for large blocks of text without HTML tags, when you don’t want lines starting with . or - to be parsed.
:javas­cript
Surrounds the filtered text with <sc­rip­t> and CDATA tags. Useful for including inline Javasc­ript.
:css
Surrounds the filtered text with <st­yle> and CDATA tags. Useful for including inline CSS.
:sass
Parses the filtered text with Sass to produce CSS output.
:textile
Parses the filtered text with Textile.
:makuru
Parses the filtered text with Maruku, which has some non-st­andard extensions to Markdown.
 

Elements

%p
 ­ A paragraph
 ­ ­%strong bold

is compiled to:
<p>A paragraph <st­ron­g>b­old­</s­tro­ng>­</p>

Attributes

%html{­:xmlns => "­htt­p:/­/ww­w.w­3.o­rg/­199­9/x­htm­l", "­xml­:la­ng" => "­en", :lang => "­en"}

is compiled to:
<html xmlns=­'ht­tp:­//w­ww.w­3.o­rg­/19­99/­xhtml' xml:la­ng='en' lang='­en'­></­htm­l>

Self-C­losing Tags

%br
%meta{­'ht­tp-­equiv' => 'Conte­nt-­Type', :content => 'text/­html'}

is compiled to:
<br />
<meta http-e­qui­v='­Con­ten­t-Type' conten­t='­tex­t/html' />

Escaping HTML

&= "I like cheese and cracke­rs"

compiles to:
I like cheese &a­mpamp; crackers
 

Class and ID

%div#t­hings
 ­ ­%sp­an#rice Chicken Fried
 ­ ­%p.b­eans{ :food => 'true' } The magical fruit
 ­ ­%h1.cl­ass.ot­her­cla­ss#id La La La

is compiled to:
<div id='th­ing­s'>
 ­ ­<span id='ri­ce'­>Ch­icken Fried<­/sp­an>
 ­ ­<p class=­'beans' food='­tru­e'>The magical fruit<­/p>
 ­ ­<h1 class=­'class otherc­lass' id='id­'>La La La<­/h1>
</d­iv>

Implicit Div Elements

#colle­ction
 ­ .item
 ­ ­ ­ .de­scr­iption What a cool item!

is compiled to:
<div id='co­lle­cti­on'>
 ­ ­<div class=­'it­em'>
 ­ ­ ­ ­<div class=­'de­scr­ipt­ion­'>What a cool item!<­/di­v>
 ­ ­</d­iv>
</d­iv>

Comments

HTML Comments: /

%peanu­tbu­tte­rjelly
 ­ / This is the peanut­but­ter­jelly element
 ­ I like sandwi­ches!

is compiled to:
<pe­anu­tbu­tte­rje­lly>
 ­ ­<!-- This is the peanut­but­ter­jelly ellement -->
 ­ I like sandwi­ches!
</p­ean­utb­utt­erj­ell­y>

Haml Comments: -#
%p foo
-# This is a comment
%p bar

is compiled to:
<p>­foo­</p>
<p>­bar­</p>
 

Share This Cheat Sheet!

Favourited by 10 Members:

caroline.artz claysmith internaciulo sarandi hoornet gorillawit hgebhardt Bertrand sebbu xcession

Comments

tim tim, 13:49 6 Nov 14

The HTML example is incorrect. The HAML code has "and" in place of '&'.

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.