Introdução ao HAML

O que é HAML?

Haml é uma linguagem de marcação usada para descrever de forma limpa e simples o HTML de qualquer documento da web sem a necessidade de codificar HTML manualmente.

HAML pode ser facilmente integrado com Sinatra e Ruby on Rails – o que permite que você escreva suas visualizações em HAML.

Um documento HTML típico

Vejamos a marcação HTML de uma página típica vista na web:

<html>
<head>
<title>Sativaware : Introduction to HAML</title>
</head>
<body>
Haml is a markup language ...

</body>
</html>

Neste documento HTML, vemos as tags de abertura e fechamento para tags HTML fundamentais, como head, title e body – além de serem aninhadas umas nas outras. O recuo é apenas para conveniência de leitura e sua estrutura é derivada do aninhamento dos elementos.

Vamos agora dar uma olhada na mesma página típica, em HAML:

%html
%head
%title
Sativaware : Introduction to HAML
%body
Haml is a markup language ...

O documento se torna mais conciso. Os elementos fundamentais são definidos com um sinal de porcentagem prefixado (%) seguido pelo nome do elemento, ou seja,% head,% body . HAML é recuado usando espaço em branco, que forma a estrutura – as tags de fechamento são omitidas.

Aqui estão alguns elementos HTML comuns com os quais você estará familiarizado – expressos em HAML ( observe o recuo do espaço em branco )


%h1 I am a big header
%h2 Slightly smaller header
%h3 An even smaller header

%span
I am inside a span element


%div
A div element


%p
A paragraph
of text

%ul
%li First unordered item
%li Second unordered item

%table
%tr
%td I am Cell 1
%td I am Cell 2

Definindo IDs de elemento

Um aspecto comum da descrição de um documento HTML é fornecer ids aos elementos e atribuir classes css – vamos dar uma olhada em como atribuir um id a um elemento div.

<div id='main-section'>
Sativaware : Introduction to HAML

</div>

Em haml, podemos expressar o acima como segue

%div#main-section
Sativaware : Introduction to HAML

Em HAML – os IDs dos elementos são prefixados com um hash (#), ou seja, # seção principal e, novamente, vemos um div sendo criado usando o prefixo de sinal de porcentagem (%) seguido pelo nome do elemento, ou seja,% div

Se quisermos tornar o HAML mais consistente, podemos usar o seguinte:

#main-section
Sativaware : Introduction to HAML

Por padrão, o HAML assumirá um elemento div onde uma tag de elemento ( ou seja,% div ) é omitida.

Atribuição de classes CSS em elementos

Digamos que temos duas classes CSS em sua folha de estilo da seguinte maneira:

/* stylesheet.css */

.box {
background
-color: #F5F5F5;
}

.rounded {
border
-radius: 10px;
}

Para fazer uso dessas duas classes CSS em HAML – vamos criar um div e atribuir a classe .box .


%div.box
This is a box

Se você quiser expandir isso e adicionar a classe css .rounded adicional , faça o seguinte:


%div.box.rounded
This is a rounded box

Os exemplos acima produziriam o seguinte HTML, respectivamente:

<div class='box'>
This is a box

</div>

<div class='box rounded'>
This is a rounded box

</div>

Links de referência

Introdução ao HAML em sitepoint.com

Introdução ao HAML screencasts.org

Site oficial do HAML

Tutorial HAML