Intro to Haml

by Sarah Vessels

What is Haml?

  • A markup language for generating HTML
  • Can be used in place of ERB
  • Write Haml, compile it, get HTML

Why use Haml over ERB?

  • Less verbose
  • Don't have to include ending HTML tags like </p>
  • Don't have to include ending Ruby tags like end
  • Closer relationship to CSS IDs and classes,
    e.g., %p.intro produces <p class="intro">
    which would be styled with .intro { } in CSS

How to use Haml

In a Rails app

  • Include a couple gems in Gemfile:
    gem 'haml', '~> 4.0.5'
    gem 'haml-rails', '~> 0.5.3'
  • Rails will compile Haml into HTML for you like it does with ERB

How to use Haml

Elsewhere

  • Depends on the app
  • Need something to compile your Haml into HTML files for the browser
  • Can use Haml gem and a tool like Grunt

Haml vs. ERB → HTML

Haml

%p.intro
  This is my
  %strong favorite!
  - 3.times do
    %em hi
    %br

ERB

<p class="intro">
  This is my <strong>favorite!</strong>
  <% 3.times do %>
    <em>hi</em><br>
  <% end %>
</p>

HTML

<p class="intro">
  This is my <strong>favorite!</strong>
  <em>hi</em><br>
  <em>hi</em><br>
  <em>hi</em><br>
</p>

HTML Nesting

  • Have to put new HTML elements on new lines
  • Example: 
    %strong This is %em not okay
    %strong This is
%em just fine

Whitespace

  • Spaces matter
  • Haml knows how to nest your HTML based on indentation
  • Have to be consistent:
    if you start indenting a file with two spaces, have to continue using two spaces
  • Won't compile into HTML if your spacing is wrong

Default HTML Tag

  • If you don't specify, Haml creates a <div> tag
  • Specify tag with %htmlTagName, e.g., %p for a paragraph

HTML ID Attribute

  • Add an ID to an HTML element using #
  • #my-div-id →
    <div id="my-div-id"></div>
  • %table#my-table-id →
    <table id="my-table-id"></table>
  • Can only use # on an element once—
    one ID per HTML tag

HTML Class Attribute

  • Add a class to an HTML element using .
  • .my-div-class →
    <div class="my-div-class"></div>
  • %body#my-body-class →
    <body class="my-body-class"></body>

Multiple Classes

  • Can use . multiple times on the same HTML element
  • .class-the-first.second-class.thirdClass →
    <div class="class-the-first second-class thirdClass"></div>

HTML ID and Class At Once

  • Can use # and . on the same HTML element
  • #crazy_id.wildClass →
    <div id="crazy_id" class="wildClass"></div>
  • %p#aNeatID.cool-class →
    <p id="aNeatID" class="cool-class"></p>

Other HTML Attributes

  • Use curly braces
  • Separate attributes with a comma
  • Use a colon after the attribute name
  • %input{type: 'text', value: 'Cats'}
  • Can also wrap attribute name in quotes and use an arrow instead of a colon:
  • %input{'type' => 'text', 'value' => 'Cats'}

Contents of an HTML Element

  • Can go after the element on the same line in Haml: 
    %a{href: '/page1'} My Link
  • Can also go on the next line, indented under the element: 
    %a{href: '/page1'}
  My Link

Ruby Code with Haml

  • Preface Ruby code with -
  • - in Haml is like <% in ERB
  • If you want to output the result of the Ruby code in Haml, use =
  • = in Haml is like <%= in ERB

Using Ruby Code in Attributes

  • %input{type: @my_ruby_variable}
  • %input{value: 'neat ' + my_ruby_function()}
  • Use class and id attributes in curly braces when you need Ruby code for them:
    %a{class: get_my_css_class(), href: '/page1'}

Questions?