or   Register or Register today to make and share your own cheat sheets! (Why Join?)

Cheatography Login

Join Us!

Not a Cheatographer? Register here!

Social Media

You can login to or register with Cheatography using your Facebook or Twitter account!

Why Join Cheatography?

Make and share cheat sheets!
Join a great community of Cheatographers and add your very own contributions.

Save your favourites!
Quick access to your most loved cheat sheets.

Fewer ads!
Members see no ads on the site.

Coming soon ...
Requests, ratings and more!

Why Join Cheatography?

Make and share cheat sheets!
Join a great community of Cheatographers and add your very own contributions.

Save your favourites!
Quick access to your most loved cheat sheets.

Fewer ads!
Members see no ads on the site.

Coming soon ...
Requests, ratings and more!

HAML Cheat Sheet by specialbrand

Comments   |   Add a Comment   |   PDF Download   |   Find:

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-Closing 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>
Pinterest

Favourited by 6 Members:

xcession sebbu Bertrand hgebhardt gorillawit hoornet

Comments

No comments yet. Add yours below!

Add a Comment

Comment:

Contents

A quick reference for HAML. See more inform­ation about HAML here: http:/­/ha­ml-­lan­g.c­om/­doc­s/y­ard­oc/­fil­e.H­AML­_RE­FER­ENC­E.html

Column Content Comments Author Updated
- HAML Cheat Sheet specialbrand 5 Jan 12
1 Doctype 0 specialbrand 5 Jan 12
Filters 0 specialbrand 5 Jan 12
Some Filters Available To Use 0 specialbrand 5 Jan 12
2 Elements 0 specialbrand 5 Jan 12
Attributes 0 specialbrand 5 Jan 12
Self-Closing Tags 0 specialbrand 5 Jan 12
Escaping HTML 0 specialbrand 5 Jan 12
3 Class and ID 0 specialbrand 5 Jan 12
Implicit Div Elements 0 specialbrand 5 Jan 12
Comments 0 specialbrand 5 Jan 12

Cheatographer

specialbrand specialbrand
www.specialbrand.net

More by specialbrand

Cheat Sheet Stats

1,143 Downloads and 3,855 Views

Tags

development, frontend

Related (shares tags with):

Thumbnail