CSS fácil, flexível e dinâmico com LESS

CSS é o padrão para estilização visual de páginas Web, então não temos muito como fugir dele. Mas ele é cheio de limitações e isso empaca o desenvolvimento. Conheça o LESS e seja mais produtivo no desenvolvimento Web.

O LESS é uma linguagem baseada em CSS (mesma ideia, sintaxe familiar) que gera CSS no final. O pessoal chama de pré-processador, porque, no fim, o browser só entende CSS mesmo. Você escreve um arquivo .less mas usa no final um .css compilado com o comando lessc. Dá pra fazer isso com um JavaScript também, que você inclui na página e compila o LESS direto no browser; útil pra testes mas não recomendado pra produção - pois toma tempo e bytes a mais.

Mas e quais são as vantagens do LESS?

Variáveis e chega de copy/paste!

Você já precisou usar a mesma cor no CSS em vários pontos diferentes? Um título e um botão com mesma cor, por exemplo? O CSS tem uma solução pra evitar copiar e colar, que seria o uso de classes. Mas, muitas vezes, usar essa mesma classe em tantas tags diferentes não é uma boa ideia.

Programadores estão acostumados com variáveis pra isso, mas o CSS não tem nada parecido. Mas o LESS sim!

 @corprincipal: #BADA55;
#titulo { font-size: 2em; color: @corprincipal; } button { background-color: @corprincipal; color: white; } 

Repare no uso da @corprincipal que não é CSS puro, mas tem uma sintaxe bem parecida e familiar. Depois de compilado, o LESS vira esse CSS:

 #titulo { font-size: 2em; color: #BADA55; } button { background-color: #BADA55; color: white; } 

Contas matemáticas e adeus valores mágicos

Sabe quando você tem aquele elemento principal com 960px mas que precisa de um padding de 35px e duas colunas lá dentro de tamanhos iguais mas deixando 20px entre elas? Qual o tamanho de cada coluna mesmo? 435px. Aí você coloca no CSS:

 .container { padding: 35px; width: 960px; } .coluna { width: 435px; } 

E quando alguém mudar o tamanho do padding, você torce pra lembrarem de refazer a conta da coluna - que, aliás, seria (960px - 35px * 2 - 20px) / 2 = 435px. No LESS, você pode fazer a conta direito na propriedade e o resultado final é calculado:

 .coluna { width: (960px - 35px \* 2 - 20px) / 2; } 

Melhor ainda, junte com as variáveis que vimos antes e você nem copia e cola valores!

 @total: 960px; @respiro: 35px; @espacamento: 20px;
.container { padding: @respiro; width: @total; } .coluna { width: (@total - @respiro \* 2 - @espacamento) / 2; } 

E dá pra fazer contas de tudo que é tipo, até com cores!

Hierarquia em prol da flexibilidade

Você tem um #topo com um título h1 dentro e uma lista ul de links. E quer estilizar todos esses elementos. Algo assim:

 #topo { width: 100%; } #topo h1 { font-size: 2em; } #topo ul { margin-left: 10px; } 

E se você precisar mudar o id do #topo? Ou trocá-lo por um <header> semântico? Tem que mexer em 3 lugares (e torcer pra ninguém ter usado em outro canto). Fora que o código fica desorganizado já que essas três regras não necessariamente precisam estar agrupadas no arquivo e podiam estar espalhadas por aí, apesar de serem todos sobre nosso cabeçalho.

No LESS, podemos escrever regras de maneira hierárquica, uma dentro da outra, e ele gera os seletores de parent. O mesmo CSS acima podia ser no LESS:

 #topo { width: 100%;
h1 { font-size: 2em; } ul { margin-left: 10px; } } 

Podemos usar vários níveis de hierarquia (mas não abuse!), deixando nosso código mais estruturado, flexível e legível.

Funções de cores e palhetas automáticas

Provavelmente você já viu algum design que tem uma cor base principal e algumas cores secundárias combinando. Talvez uma versão mais light dessa cor base é usada como fundo e uma cor mais saturada no botão.

Você então pega o código de cada cor no Photoshop e coloca no CSS. E, se precisar mudar a cor, deve gerar as outras secundárias, certo? No LESS, você pode usar funções pra gerar essas cores:

 @corbase: #BADA55;
body { background: lighten(@corbase, 20%); } h1 { color: @corbase; } button { background: saturate(@corbase, 10%); } 

Vai gerar cores 20% mais lights e 10% mais saturadas:

 body { background:#dceca9; } h1 { color:#bada55; } button { background:#bfe44b; } 

Você ainda tem: darken, desaturate, fadein, fadeout, spin, mix e até funções matemáticas round.

Reaproveitamento com mixins

Uma das coisas mais legais do LESS é sua capacidade de criar as próprias funções, que ele chama de mixins. É útil quando você tem que repetir a mesma coisa várias vezes, como nas propriedades CSS3 que precisam de prefixos, tipo uma borda redonda.

Você pode definir um mixin recebendo argumento o tamanho da borda e cuspindo as versões pros diversos navegadores:

 .arredonda(@raio: 5px) { -webkit-border-radius: @raio; -moz-border-radius: @raio; border-radius: @raio; } 

Parece uma classe CSS mas ele recebe uma variável como parâmetro (que pode ter um valor default também). E você pode usar esse mixin facilmente:

 .painel { .arredonda(10px); } .container { .arredonda; width: 345px; } 

Isso gera o CSS:

 .painel{ -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } .container{ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
width:345px; } 

As possibilidades são infinitas! Pense num mixin pra te ajudar a gerar aqueles gradientes CSS3 chatos ou um mixin próprio .botaoBonito que gera botões legais só recebendo uma cor base e um tamanho.

Executando

No site do LESS, você pode baixar a versão standalone dele. Você pode rodá-lo apenas incluindo um JavaScript na página que faz o parsing quando ela carrega.

Pra melhor performance, o ideal seria gerar o CSS antes usando o compilador. Há uma versão em linha de comando usando Node.JS, mas como é JavaScript, você pode rodá-lo em qualquer canto - até no Java com Rhino.

Há também programas visuais pra instalar, como o LESS.app e dá pra testar código rapidamente online mesmo no LessTester.com.

Muito mais

A linguagem LESS tem mais alguns recursos além dos vistos nesse post. Dá pra fazer mixins mais complicados com uma espécie de if/else por exemplo e até usar pattern matching. Você encontra todos os detalhes na documentação oficial.

E, além do LESS, existem outros pré-processadores CSS no mercado. O Sass é muito famoso no mundo Ruby e tem zilhões de funções, tornando-o a mais poderoso que o LESS mas mais complexo também. Há também o Stylus que simplifica ainda mais a sintaxe.

Aqui na Caelum usamos bastante o LESS e ele é o preferids do mercado também. E, você, usa algum preprocessador CSS? Pensa em usar dadas as limitações do CSS? Qual? Ou prefere CSS puro mesmo e ficar independente de ferramenta?

No curso WD-43 da Caelum a gente discute boas práticas de CSS e web design, como deixar o código mais flexível, facilitar mudanças e reaproveitamento.