Olá
a todos. Juntei minha vontade de compartilhar meus conhecimentos com
a vontade de criar um artigo e enviar ao iMasters e aqui está!
Neste
artigo vamos falar sobre a gem HAML. Ela foi criada para facilitar a criação da parte visual de seu projeto
web. Como todos já sabem, RubyOnRails nos proporciona uma
agilidade muito grande no desenvolvimento, mas para que sofrer se
existem outros modos para agilizar mais ainda? Um
deles é o HAML e o outro é o SASS. O SASS já está
incluso no HAML, trata-se de criar seus estilos com muito mais
facilidade e sem frescuras.
HAML
Instalação
Sua
instalação é bem simples, bastando rodar o comando abaixo em seu
console. Lembrando que não é necessário apenas instalar a gem,
precisa adicioná-la ao projeto também.
gem install hamlAdicionando ao projeto
Feito
isso, rode o comando abaixo para ser adicionado ao seu projeto.
haml --rails path/to/rails/app
Pronto! Está instalado
e funcionando. Se teve algum problema, veja o exemplo abaixo.
Exemplo
Suponha
que o diretório principal de meu projeto se chame agenda. Então ficaria mais ou menos assim:
haml --rails agenda/app Após
rodar o comando, deverá ser exibida esta mensagem:
Haml plugin added to agendaTrabalhando…
A alteração mais
drástica, digamos assim, é a extensão do arquivo. Agora não mais
será .html.erb, e sim .haml
Antes
index.html.erbAgora
index.haml
Exemplo na prática
Anteriormente
suas view eram feitas assim:
<html>
<head>
<title>adrianotadao.com | voraz.com.br</title>
</head>
<body>
<h1>Meu blog | Trabalho</h1>
</body>
</html>Agora, com o haml, ficarão assim:
%html
%head
%title
adrianotadao.com | voraz.com.br
%body
%h1
Meu Blog | Trabalho Notou
como é mais prático e suas tags ficam muito mais organizadas e
limpas, possibilitando assim uma melhor compreensão e fácil
manutenção em um futuro próximo?
Agora
não é mais necessário ficar abrindo e fechando as tags. Basta
começar com o caracter % e manter a subordinação. O
alinhamento é de fundamental importância. Se antes você
estava acostumado com o html, que não se incomodava com o
alinhamento, agora você precisará ficar mais atento, pois se não
estiver alinhado, ele não rodará.
Definindo
as propriedades
A
grande maioria das tags do html suporta definição das
propriedades como width,
color, align,
id, classe,
etc. Veja abaixo como funciona a estrutura de propriedades.
%tag{:propriedade1=>”valor”,
:propriedade2=>”valor”}
Na prática
Tabela
%table{:width=>"500px", :border=>"1px", :align=>"center"}
%tr
%td Inputs
Para criar qualquer tipo de input (file_field, input, buttom, radio, check, etc) basta setar o tipo do input desejado na propriedade :type. Veja:
Criando um radio buttom
%input{:type=>"radio"}
Comando ruby dentro
do haml
A
não ser as tags, os ifs, for, while e afins
não mudam muita coisa, mas irei demonstrá-los. Digamos que
eu queira listar os nomes dos projetos feitos, seria
algo mais ou menos como o exemplo abaixo.
Antes quando fosse adicionar alguma linha de comandos do ruby era necessário colocar <% e começar o comando e ao terminar colocar novamente %>. Isso é muito trabalhoso. Veja a diferença:
Antes
<% - @projetos.each do |r| %>
<h1>
<% = r.nome %>
</h1>
<% end %>
Agora
- @projetos.each do |r|
%h1
= r.nome
O básico do haml é
este. Qualquer dúvida, no site do plugin existem alguns exemplos
disponíveis.
Site
oficial: http://haml-lang.com/
SASS
O
SASS como foi dito no
início, consiste em criar os css de um modo prático.
Não
é necessário instalar nada, porém você deve seguir estes
procedimentos para sua correta utilização, pois será preciso criar estilos com a extensão .sass e, como o ruby não faz a
leitura destes arquivos, para aplicar no html é necessário fazer a
conversão de .sass para .css. Mas não se preocupe,
isso é automático se você criar todos os arquivos .sass dentro
do diretório com o nome de sass, que por sua vez deverá estar
dentro de public/stylesheets.
É
necessário criar este diretório pois, ao fazer o reload de alguma página de seu projeto, o sass pega todos os arquivos .sass
e gera o .css automaticamente.
Siga
as instruções abaixo que tudo ocorrerá bem.
Instruções
Veja
se na sua pasta pública do projeto (public) existe o diretório
stylesheets. Caso não haja um, crie. Agora dentro da
mesma(stylesheets) crie um diretório com o nome de sass.
Deverá ficar assim: public/stylesheets/sass.
Exemplo
Quero
criar um arquivo css com o nome principal.css. Então, crio
dentro do diretório sass, que se encontra em
public/stylesheets/sass, o principal.sass.
Você
já deve saber que nos arquivos de css é necessário colocar chaves e
ponto e vírgula, certo? Com SASS, nada disso é necessário.
Comparação
CSS
body{
background-color: #000;
font-size: 16pt;
}SASS
body
background-color: #000
font-size: 16pt
Obs: O sass necessida de um espaço entre a propriedade e o valor.
Certo
background-color: #000
Errado
background-color:#000 E
assim sucessivamente para todos os elementos que desejarem. Lembrando
que os demais atributos são iguais, o que realmente muda é o fato
de não ser mais necessário colocar chaves e ponto e vírgula.
Adicionando
o estilo ao haml
Com o
css feito, agora só precisamos adicionar ao html.
Exemplo
= stylesheets_link_tag "nome_do_estilo"
%html
%head
%title
adrianotadao.com | voraz.com.br Utilizando
comando de conversão
O
SASS também lhe permite converter os estilos com seus comandos.
CSS
para SASS
css2sass style.css style.sass
SASS para CSS
sass style.sass style.cssReferências
De 0 a 10, o quanto você recomendaria este artigo para um amigo?