CSS rápido e divertido com Sass

6 mar 2010 - 02:52 — em Ruby (tags: , , , , , , , , , ) — Comentar!

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. :)