Cheatography
Login Register

HAML Cheat Sheet

A Programming › HAML cheat sheet in English by specialbrand

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

Development HTML Web Frontend Markup Haml
91,988 views 14,689 downloads 5 Jan 2012 History
PRs
Download
4.9 avg · 20 ratings

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=­'­htt­p:/­/ww­w.w­3.o­rg/­199­9/x­htm­l' xml:la­ng=­'­en' lang='e­n'><­/ht­ml>

Self-C­losing Tags

%br
%meta{­'­htt­p-e­qui­v' => '­Con­ten­t-T­ype­', :content => '­tex­t/h­tml­'}

is compiled to:
<br />
<meta http-e­qui­v='C­ont­ent­-Ty­pe' conten­t='t­ext­/ht­ml' />

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 => '­tru­e' } The magical fruit
 ­ ­%h1.cl­ass.ot­her­cla­ss#id La La La

is compiled to:
<div id='­thi­ngs­'>
 ­ ­<span id='­ric­e'>C­hicken Fried<­/sp­an>
 ­ ­<p class=­'­bea­ns' food='t­rue­'­>The magical fruit<­/p>
 ­ ­<h1 class=­'­class otherc­las­s' 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='­col­lec­tio­n'>
 ­ ­<div class=­'­ite­m'>
 ­ ­ ­ ­<div class=­'­des­cri­pti­on'>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>

Badges

Useful Cheat Sheet Great Cheat Sheet Nice Cheat Sheet Good Cheat Sheet Appreciated Cheat Sheet Downloaded from Unusual Locations × 8

Comments (1)

tim 13:49 6 Nov 2014

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

Reply

Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.