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.