¿Qué es HAML?

Está diseñado para ser un lenguaje de marcado tan elegante como sea posible. Busca hacer plantillas más sencillas y deshacerse de los lenguajes “feos” o difíciles de entender. Haml eliminina la necesidad de escribir código HTML específico dentro de la plantilla

Principios de HAML

El marcado debería ser bonito

El marcado no debería usarse solamente como una herramienta para lograr que los navegadores muestren una página como el autor lo desee. El marcado se debe entender, debería ser amigable y placentero como el renderizado.

El marcado no debería repetirse

HTML implica grandes repeticiones. La mayoría de los elementos deben ser nombrados dos veces: una vez antes de su contenido y otra después.

ERB agrega aun más repetición y caracteres innecesarios. Haml evita todo esto recurriendo al sangrado en vez del texto para determinar dónde empiezan y terminan los elementos y los bloques de código. Esto no soloda como resultado plantillas más compactas sino que además hace el código mucho más limpio a la vista.

El marcado debería tener un buen sangrado

Uno de los mayores problemas de los lenguajes de plantillas tradicionales es que no solo no fomentan el código bien sangrado sino que encima lo hacen difícil o incluso imposible de escribir. El resultado es un XHTML confuso e ilegible. Haml formatea las etiquetas de manera que todas estén bien sangradas y reflejen la estructura subyacente del documento.

La estructura de HTML debería ser clara

XML y XHTML son formatos fundados sobre la idea de un documento estructurado. Tal estructura se refleja en su marcado, y asimismo debería reflejarse en metamarcado como Haml. Debido a que la lógica de Haml se basa en el sangrado de elementos hijos, esta estructura se preserva naturalmente, lo que hace al documento mucho más fácil y lógico de leer por simples humanos.

No sólo Ruby...

La implementación oficial de HAML está hecha para trabajar con Ruby, con extensiones para Ruby on Rails y Merb, pero también es bastante útil para el desarrollo web en general. A continuación expongo un ejemplo de HAML - HTML


Ejemplo HAML - HTML

HAML con Ruby

ERB

<div id="perfil">
<div id="fecha"><%=print_fecha%></div>
<div id="direccion"><%=current_user.direccion%></div>
</div>
<div id="segundos_datos">
<div id="correo"><%=current_user.correo%></div>
<div id="telefono"><%=current_user.telefono%></div>
</div>

HAML como alternativa a ERB

Con ERB los códigos embebidos son más difíciles de entender por más ordenados que seamos.
Con HAML generar tags es mucho más sencillo ya que no hay que estar pendientes de cerrarlos, se cierran automáticamente por la identación del código. HAML usa un código más limpio y ordenado en el que sin duda escribiremos mucho menos.
"la perfección se alcanza no cuando ya no queda nada más por agregar, sino cuando ya no queda nada más por eliminar"

Ejemplo de ERB


Ejemplo de HAML

Instalar HAML

Nomenclatura

Definicion de un elemento

Ejemplo:

Agregando Clase (.)

%tagname.clase

Ejemplo:

Utilizando los DIV

Identación

Embebiendo Ruby

%h1 = @perro.nombre
- if @perro.agresividad > 5
%p Es muy agresivo

Compilación

SASS