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.

Estude online na Alura

Programação, Mobile, Front-end, Design & UX, Infraestrutura e Business