Sobre Haml

Haml es un lenguaje de marcado que sirve para generar HTML.

Así es como luce Haml:

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

Su equivalente en ERB sería:

<section class=”container”>
  <h1><%= post.title %></h1>
  <h2><%= post.subtitle %></h2>
  <div class=”content”>
    <%= post.content %>
  </div>
</section>

Ventajas

Como ves es mucho más conciso, hay que escribir mucho menos para generar lo mismo. Está bien tener un editor que te abra y cierre etiquetas, pero es mucho mejor no tener que hacerlo.

Evitas posibles problemas con el cierre de las etiquetas, mover un elemento de una capa a otra es tan sencillo como subirlo o barajarlo varias líneas e identarlo correctamente.

Sintaxis

Se usa el símbolo % para describir elementos html, por ejemplo:

%p Hola mundo

%div
  %p
    Hola
    %strong mundo

El id se especifica con #

%div#main-section
  sección principal

  %p#message Hola mundo

#other-section
  %p esto genera un div con id: 'other-section`

Las clases se pueden especificar con .loquesea


%div#main-section.new-style
  %p
    Genera un div con id: 'main-section' y class: 'new-style'


  %p.another.vintage
    Las clases se pueden anidar

.alone
  Y también se pueden usar directamente creando un div con las clase 'alone'

Estos atributos junto con todo lo demás se pueden especificar en un hash:

%div{class: 'vintage' id: 'foo', data: {size: 22} }

En el hash puedes meter ruby:

%div.user{data: @user.attributes}

Además dispones de = y - como en ERB para trabajar con ruby.

#users
  - @users.each do |user|
    .user
      = link_to user.name, edit_user_path(user)

Puedes hacer mas pruebas en haml-converter.com

Quejas habituales

Tener que aprender un nuevo lenguaje

Eso no es verdad, no aprendes ningún lenguaje nuevo, es simple HTML con ruby. Se hace una conversión uno a uno donde cada símbolo en Haml equivale a algo en HTML/ERB.

Lento

Es verdad, es algo más lento que ERB, pero normalmente no será el cuello de botella.

De todas formas Hamlit soluciona el problema. Podeis ver más detalles directamente en su README.


Comentarios