%h2 That's the wave - get it
%div
  %p
    indentation represents relation %p
    is indented more than the %div
    thus its a child of it.
    Same applies to this text.
  %p within a p tag
  %p
    PHP-TO-HAML gets out of the way.
    It helps you focus on your real job rather
    than on nasty PHP details

<h2>That's the wave - get it</h2>
<div>
  <p>indentation represents relation %p
is indented more than the %div
thus its a child of it.
Same applies to this text.</p>
  <p>within a p tag</p>
  <p>PHP-TO-HAML gets out of the way.
It helps you focus on your real job rather
than on nasty PHP details</p>
</div>

%span='this is an arbitrary HTML expression'
%span='<> See how this gets quoted'
%span!='<b>unquoted bold text</b>'
%div
  ="this works :-)\n"
  =strtoupper("this too")."\n"
  interpolation quoted always eg #{'</>'}
%span='Note: '.substr('Ecomplicated php expression',1)

<span>this is an arbitrary HTML expression</span>
<span>&lt;&gt; See how this gets quoted</span>
<span><b>unquoted bold text</b></span>
<div>this works :-)
THIS TOO
interpolation quoted always eg &lt;/&gt;
</div>
<span>Note: complicated php expression</span>

:javascript
  // this code will be put into a JS tag
  doSomething('foo');

<script type='text/javascript'>
  //<![CDATA[
    // this code will be put into a JS tag
    doSomething('foo');
  //]]>
</script>

:css
  // same for CSS rules

<style type='text/css'>
  /*<![CDATA[*/
    // same for CSS rules
  /*]]>*/
</style>

%div
  :plain
    Indentation also applies to filters.

    You can insert text verbatim here.
    Text within filters may contain interpolations:
    #{'<>'} #{3*7} #{count(array(1,2,3))}

    No quoting takes place
    <a href="www.google.com">GOOGLE</a>
    unless you use the escaped filter:

<div>Indentation also applies to filters.

You can insert text verbatim here.
Text within filters may contain interpolations:
<> 21 3

No quoting takes place
<a href="www.google.com">GOOGLE</a>
unless you use the escaped filter:
</div>

:escaped
    <a href="www.google.com">GOOGLE</a>

<a href="www.google.com">GOOGLE</a>

%h1 foreach
%ul
  -foreach(array(1,2) as $nr)
    %li=$nr

<h1>foreach</h1>
<ul>
  <li>1</li>
  <li>2</li>
</ul>

%h1 assign vars and add conditional HTML code
- $pred = true;
- if ($pred)
  %div true
- else
  %div
    false (note that closing of else
    branch depends on indentation only!)

<h1>assign vars and add conditional HTML code</h1>
<div>true</div>

%h1 or use a simple for loop
- for($i=0; $i<3; $i++)
    =$i.' '

<h1>or use a simple for loop</h1>
0  1  2

%h1
  CSS selector like div attributes can
  be provided this way:
#container.container
  ...

%h1 HTML like attributes
Note how duplicates are removed from the class attribute:
%a(class="foo bar foo") link
%a(href="# looser" href="# winner") link

%h1 Ruby Hash like attributes
Note how duplicates are removed from the class attribute:
%a{:href=>"#", :class=>["a", "list", "bar"]} link

%h1 You can also use interpolation within attribute names:
%div{"_#{3*7}" => "really weird attribute!"}

%h1 And of course you can mix both styles:
%h(target="_blank"){:href => "href value"} link

<h1>CSS selector like div attributes can be provided this way:</h1>
<div class='container' id='container'>...</div>
<h1>HTML like attributes</h1>
Note how duplicates are removed from the class attribute:
<a class='bar foo'>link</a>
<a href='# winner'>link</a>
<h1>Ruby Hash like attributes</h1>
Note how duplicates are removed from the class attribute:
<a class='a bar list' href='#'>link</a>
<h1>You can also use interpolation within attribute names:</h1>
<div _21='really weird attribute!'></div>
<h1>And of course you can mix both styles:</h1>
<h target='_blank' href='href value'>link</h>

This will only be rendered for IE:
/[if IE]
  %p IE only

-# This won't be rendered at all

/ this will be rendered as HTML comment

This will only be rendered for IE:
<!--[if IE]>
  <p>IE only</p>
<![endif]-->
<!-- this will be rendered as HTML comment -->