Haml Getting Started

1. What is Haml

Haml is the HTML Abstraction Markup Language, followed by the principle that the tag should be beautiful. Haml can accelerate and simplify the template, the advantages are concise, readable, efficient.

Comparison of 2.ERBM templates and Haml templates

. Erb Template Code:

<section  class  = "container" ;  <h1 ;  <%= Post.title%>  </h1 ;  << Span class= "Hljs-title" >h2 ;  <%= post.subtitle%>  </h2 ;  < div  class  = "content ";  <%= post.content%>  </div ;  </section  > 
 

The same code uses HAML:

%section.container  %h1= post.title  %h2= post.subtitle  .content    = post.content

3. Installing Haml

Haml is a command-line tool, the Gem installation is expressly:

install  haml

Install the latest version:

geminstallhaml--pre

Update Gemfile in the Rails project to add Haml dependencies:

‘haml‘

4.erb Turn Haml

Haml is a substitute for the Erb, app/views. erb files can be changed directly to the Haml template by modifying the suffix name:

app/views/account/login.html.erb → app/views/account/login.html.haml

5. Using Haml 5.1 Erb Code transfer HAML code

ERB:

<strong><%= item.title %></strong>

Haml:

%strong= item.title

An HTML tag is represented in Haml by a% spike signature, for example,,,, %strong %div %body %html tag name followed by ＝ , ＝ tells Haml to calculate Ruby code, return value as the content of the label. The Haml automatically detects the newline character of the return value and formats the label.

5.2 Adding attributes to Tags:

Html:

<strong class="code" id="message">Hello, World!</strong>

HAML:

%strong{:class => "code", :id => "message"} Hello, World!

5.3 Simplifying Div

Html:

<div class=‘content‘>Hello, World!</div>

Haml:

.content Hello, World!

5.5 Example One

ERB:

<divclass=‘itemid=‘itemitem.id %>‘>  item.body %></div>

HAML:

.item{:id =>"item#{item.id}"item.body

5.2 Example 2

ERB:

<div id=' content '>  <div class=' left column '>    <h2>Welcome to our site!</H2>    <p><%= print_information%></P>  </div>  <div class="right column">    <%= render:p artial = "sidebar" %>  </div></div>

HAML:

#content  .left column     %h2 Welcome to our site!     %p  = print_information  .right column     =render :partial => "sidebar"

Haml using indentation to represent hierarchical relationships

Haml Getting Started