%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 get's out of the way.
    It helps you focus on your real job rather
    than on nasty PHP details

<h2> That&#039;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 get&#039;s out of the way.
It helps you focus on your real job rather
than on nasty PHP details


  </p>
</div>

That's the wave - get it

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

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

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

<script type='text/javascript'>
  //<![CDATA[
    // this code will be put into a JS tag
dosmething('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 text which will be inserted 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 you use the escaped filter:

<div>Indentation also applies to filters.

You can text which will be inserted verbatim here
Text within filters may contain interpolations:
<> 21 3

No quoting takes place
<a href="www.google.com">GOOGLE</a>
unless you 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>

foreach

• 1
• 2

%h1 assign vars and add conditinoal 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 conditinoal HTML code

</h1>  <div> true

  </div>

assign vars and add conditinoal HTML code

%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  

or use a simple for loop

%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 interplation within attribute names:
%div{"_#{3*7}" => "really wired 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 interplation within attribute names:

</h1>
<div _21='really wired 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
-->