🥇 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

O que é HAML?

Um documento HTML típico

Definindo IDs de elemento

Atribuição de classes CSS em elementos

Links de referência

Related Posts