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.
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.
1 = stylesheets_link_tag "nome_do_estilo"
2 %html
3 %head
4 %title HE:labs
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.
Comentários
Included file post/disqus_thread.html not found in _includes directory