Preprocessors - Session2

Division Classes & IDs

In the event a class or ID is used on a div the %div may be omitted, and the class or ID value can be used outright. Again, classes are to be identified with a . and IDs are to be identified with a #.

HAML

HAML CLASSES & IDS.awesome
.awesome.lesson
#getting-started.lesson

COMPILED HTML

HAML CLASSES & IDS<div class="awesome"></div>
<div class="awesome lesson"></div>
<div class="lesson" id="getting-started"></div>

Boolean Attributes

Boolean attributes are handled just as they would be within Ruby or HTML, all depending on the syntax being used.

HAML

%input{:type => "checkbox", :checked => true}
%input(type="checkbox" checked=true)
%input(type="checkbox" checked)

COMPILED HTML

<input type="checkbox" checked>

Escaping Text

One of the benefits of Haml is the ability to evaluate and run Ruby, however this isn’t always the desired action. Text, and lines of code, can be escaped by using a backslash, \, allowing the text to be rendered explicitly without being executed.

In the example below, the first instance of = @author is executed Ruby, pulling the authors name from the application. The second instance, starting with the backslash, is escaped text, printing it as is, without execution.

HAML

.author
  = @author
  \= @author

COMPILED HTML

<div class="author">
  Shay Howe
  = @author
</div>

Text Escaping Alternatives

Occasionally escaping text doesn’t quite do the job and Ruby is needed to generate the desired output. One popular instance of this is when trying to include a period directly after a link, but not as part of the anchor text. Putting the period on a new line isn’t acceptable as it will be treated as an empty class value, causing a compiling error. Adding a backslash before the period will escape the character however it places a blank space between the last word and the period. Again, not producing the desired output.

In these cases a Ruby helper comes in handy. In the example below, the helper is used to place a period directly after the last word but still outside of the anchor text.

HAML

%p
  Shay is
  = succeed "." do
    %a{:href => "#"} awesome

COMPILED HTML

<p>Shay is <a href="#">awesome</a>.</p>

Comments

As with elements and attributes, comments are handled a bit differently in Haml as well. Simply enough, code can be commented out with the use of a single forward slash, /. Individual lines may be commented out with the use of a forward slash at the beginning of the line, and blocks of code can be commented out by being nested underneath a forward slash.

HAML

%div
  / Commented line
  Actual line

/
  %div
    Commented block

COMPILED HTML

<div>
  <!-- Commented line -->
  Actual line
</div>

<!--
  <div>
    Commented block
  </div>
-->

Conditional Comments

Conditional comments are also handled differently in Haml. To create a conditional comment use square brackets, [], around the condition. These square brackets need to be placed directly after the forward slash.

HAML

/[if lt IE 9]
  %script{:src  => "html5shiv.js"}

COMPILED HTML

<!--[if lt IE 9]>
  <script src="html5shiv.js"></script>
<![endif]-->

Silent Comments

Haml also provides the ability to create Haml specific comments, or silent comments. Silent comments differ from general HTML comments in that upon being complied any content within a silent comment is completely removed from the page, and is not displayed in the output. Silent comments are initialized with a dash then the number sign, -#. As with other comments, silent comments may be used to remove one line or multiple lines with the use of nesting.

HAML

%div
  -# Removed line
  Actual line

COMPILED HTML

<div>
  Actual line
</div>