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

css-less-topo

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.

Fonte: Caelum

Postagens Relacionadas