« HE:labs
HE:labs

Falando sobre HAML e SASS

Postado por Rodrigo Gomes em 10/05/2013

A HAML é uma gem que facilita toda a parte visual de uma aplicação web.

O framework Ruby on Rails ajuda bastante no quesito agilidade. E por que não ser mais ágil, não precisando ficar fechando tags do HTML? Isso é resolvido criando estilos mais ágeis e legíveis para alguém que, futuramente, venha mexer no seu código.

Eu, particularmente, estou começando a aprender e usá-la em alguns projetos web. Tenho mais costume com o HTML tradicional, mas é bem tranquilo usar a HAML. Ela utiliza as mesmas tags do HTML, mas a vantagen é que não precisa ficar fechando as tags. Em vez disso, você usa prefixos como % ou . para chamar as tags HTML. Não se preocupe, pois quando executado no browser, o HTML gerado será o tradicional.

Antes o nome do arquivo que era index.html passa a ser index.haml.

Mostrando na prática, citarei dois exemplos: com o HTML tradicional e o outro no HAML.

Método tradicional do HTML:

1 <html>
2   <head>
3     <title>HE:labs </title>
4   </head>
5   <body>
6     <h1>Meu 1 post | blog</h1>
7   </body>
8 </html>

No HAML ficaria assim:

1 %html
2   %head
3     %title HE:labs
4   %body
5     %h1
6       Meu 1 post | blog

Um dos cuidados que se deve ter com o HAML é a sua indentação. Ela deve ficar de forma correta (alinhada), pois se o código estiver desalinhado, não rodará.

Assim está errado:

1 %html
2         %head
3 %title
4    HE:labs
5          %body
6         %h1
7          Meu 1 post  |  blog

Bem mais prático e tranquilo sobrescrever o HTML com o HAML, onde o código fica mais organizado e limpo. Outra coisa ainda não mencionada é a possibilidade de adicionar código Ruby dentro do HAML.

SASS

O SASS faz parte do HAML e consiste em criar os css de um modo ágil, prático e legível. Não é necessesário instalar nada, porém, esses procedimentos que citarei logo abaixo, devem ser seguidos para que se tenha uma boa utilização. Lembrando que quando você executar o seu projeto no browse, o css vai ser interpretado de forma tradicional.

Forma tradicional do CSS:

1 body {
2   background-color: #000;
3   font-size: 16pt;
4 }

No SASS funciona da seguinte maneira:

1 body
2   background-color: #000
3   font-size: 16pt

Obs: Notem que não utilizamos mais as chaves e o ponto e vírgula. E ainda, o uso do espaço entre a propriedade e o valor.

Adicionando o estilo ao HAML:

1 = stylesheets_link_tag "nome_do_estilo"
2 %html
3   %head
4     %title HE:labs

Vamos agora aprender como instalar a gem do HAML

A instalação é bem fácil: basta rodar o comando abaixo em seu terminal. Não esqueça de adicionar a gem dentro do projeto.

1 gem install haml

Quando a etapa acima for concluída, rode o próximo comando que será adicionado no seu projeto:

1 haml --rails meuprojeto/app

Depois de executado, uma mensagem será exibida:

1 Haml plugin added to meuprojeto

Pronto, agora você já tem o HAML instalado na sua aplicação web pronto para uso.

Até a próxima galera.

Compartilhe

Sabia que nosso blog agora está no Medium? Confira Aqui!