Update: Criei um repositório no Github (na verdade ele está lá faz tempo, só esqueci de mencionar aqui #fail) com alguns mixins úteis, como CSS Reset para HTML 5, border-radius e opacity.
Há algumas semanas conheci o Sass (Syntactically Awesome Stylesheets) através de um projeto em que participei. Fui atrás, descobri como funciona e hoje vou contar um pouco da experiência com mais essa maravilha.
Sass é uma metalinguagem, implementada em cima do CSS, que facilita – muito – o desenvolvimento de estilos para documentos. Ele deixa os stylesheets mais limpos, estruturados e gerenciáveis. Sass torna divertida a tarefa de criar CSS, implementando regras de aproveitamento de código, variáveis, mixins (pequenas funções) e muito mais. Tudo numa sintaxe bem mais legível e organizada que CSS comum.
Como exemplo, veja um CSS comum:
1 2 3 4 5 6 7 8 9 10 11 12 13 | #id_do_elemento { width: 200px; background: blue; font-family: Verdana,Arial,Helvetica; font-size: 2em; font-weight: bold; } #id_do_elemento .filho { background: red; font-size: 1em; padding: 10px; } |
E agora o mesmo, escrito com SASS:
1 2 3 4 5 6 7 8 9 10 11 12 | #id_do_elemento width: 200px background: blue font: family: Verdana,Arial,Helvetica size: 2em weight: bold .filho background: red font-size: 1em padding: 10px |
O Sass também suporta variáveis e mixins, veja um exemplo abaixo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // Variáveis !cor_de_fundo = #f0f0f0 !cor_da_borda = #aaa !margem = 30px 20px // Mixin para bordas arredondadas =border-radius( !radius = 10px ) :border-radius = !radius :-webkit-border-radius = !radius :-moz-border-radius = !radius #meu_elemento :background = !cor_de_fundo :border = 1px "solid" !cor_da_borda :margin = !margem padding: 10px +border-radius(20px) span :background = !cor_da_borda :border = 1px "solid" (!cor_de_fundo / 1.4) |
O resultado do código acima será…:
1 2 3 4 5 6 7 8 9 10 11 12 | #meu_elemento { background: #f0f0f0; border: 1px solid #aaaaaa; margin: 30px 20px; padding: 10px; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; } #meu_elemento span { background: #aaaaaa; border: 1px solid #ababab; } |
Perfeito pra quem gosta da “doutrina” DRY, né? 
A sintaxe é muito parecida com CSS, o que deixa a curva de aprendizagem muito baixa. Você aprende a usar o Sass em poucos minutos, a única parte onde complica é a indentação – que garante (praticamente obriga você a escrever) um código muito mais limpo e legível.
Instalação
Pra instalar, você precisa do Ruby e da gem do Haml (que será assunto de um futuro post):
1 | gem install haml |
Agora você já pode converter seus arquivos CSS para Sass ou vice-versa:
1 2 3 4 5 | # De CSS para Sass css2sass estilo.css estilo.sass # Compila um arquivo Sass (gera o CSS final) sass estilo.sass estilo.css |
Integração com o Rails
Agora vem a melhor parte: a integração do Sass com o Ruby on Rails. A gem do Haml (e consequentemente do Sass) gera automaticamente os arquivos CSS compilados a partir de um arquivo Sass. Pra isso, é só gastar alguns segundos configurando a sua aplicação. No Rails <= 2, adicione no seu arquivo environment.rb o seguinte:
1 | config.gem 'haml' |
Já no Rails 3, adicione o seguinte no arquivo Gemfile:
1 | gem "haml" |
Não há nenhuma perda de performance, já que os arquivos CSS compilados só são gerados novamente quando houver alguma modificação no Sass original. Resumindo a história, Sass é um CSS melhor, mais gerenciável e reaproveitável. Usarei sempre que possível e mais que recomendo.