grit| commit

daily learnings as a ruby dev

Build Robust & Production Quality Applications: Precourse, Haml

20 Dec 2014

Writing Basic Haml 1. No closing tags 2. Nesting controlled via strict white-spacing and indenting 3. Nesting tags must be indented on a new line 4. Use spaces or tabs to nest tags within other tags 5. Tabs must be consistent

Examples:

Haml:

%h2
%ul
  %li
  %li
  %li

Links:

Haml:

%a{href: '/courses', title: 'Courses'} Courses

or

%a(href="/courses" title="Courses") Courses

HTML:

<a href='courses' title='Courses'>Courses</a>

Divs:

Haml:

%section#content.container
  %div.stats.container

HTML:

<section id="content" class="container">
    <div class="stats container"></div>
    </section>

Haml will insert a div if no HTML tag is explicitly defined:

Haml:

Note: stats.container is the same as %div.stats.container

HTML

<div class="stats container"></div>

Adding Ruby:

Haml:

- title = 'Rails for Zombies'
%h1= title

Erb:

<% title = 'Rails for Zombies' %>
<h1><%= title%></h1>

HTML output:

<h1> Rails for Zombies </h1>

Loops:

Haml:

- zombies = %w{Ash Bob Jim}
%section#zombies
  %ul
    - zombies.each do |zombie|
    %li= zombie

HTML:

<section id="zombies">
   <ul>
   <li>Ash</li>
   <li>Bob</li>
   <li>Jim</li>
  </section>

You can use the same view helpers as before:

Haml:

=link_to "Check us out on twitter", "http://twitter.com/codeschool"

HTML:

<a href="http://"twitter.com/codeschool"><Check us out on twitter</a>

Interpolation:

You can also use #{} interpolation to insert Ruby expressions

Haml:

%p Hi, My name is #{@user.name}

HTML:

<p> Hi, My name is Casey</p>

Related Posts