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.

Tags: , ,

34 Comentários

  1. Rodrigo Ferreira 21/06/2012 at 10:26 #

    Legal!

    Não conhecia o LESS, achei muito interessante para reaproveitamento de código, e gostei muito pela sintaxe ser bem simples.

  2. José Volmei Dal Prá Junior 21/06/2012 at 11:17 #

    Show de bola o post. Eu não sabia destes pré-processadores. Bem interessante. Será que tem algum facilitador para integrar com os JSPs ou Facelets?

  3. Caio Ribeiro Pereira 21/06/2012 at 14:00 #

    José Volmei Dal, para Java também tem Less, de uma olhada nesse site que explica como integrá-lo: http://www.asual.com/lesscss/

  4. Felipe Barbosa 21/06/2012 at 14:54 #

    Fantástico! Eu também não conhecia o LESS e achei muito interessante por ser simples e muito útil.

  5. Douglas Rossignolli (@xdougx) 21/06/2012 at 14:55 #

    Realmente muito bom, reaproveitamento com variáveis e tudo mais, mas por exemplo eu conseguiria fazer algo deste tipo:

    .rounded() {
    .rounded_coner(){ /*meu estilo*/}
    .radial_background(){/*meu estilo*/}
    //por ai vai
    }

  6. Filipe 21/06/2012 at 17:01 #

    COOL

  7. Sérgio Lopes 21/06/2012 at 17:13 #

    Oi Douglas!

    Você tá pensando em reaproveitar código de mixins dentro de mixins? Se for, isso aqui funciona:

     .rounded_corner(){ border-radius: 5px; }
     .radial_background(){ display: block; }
    
    .rounded() {
     .rounded_corner();
     .radial_background();
    }
    
    div {
        .rounded();
    }
    

    Ou você tava pensando mais na ideia de ter mixins num escopo menor? Porque tem um recurso de namespaces no LESS pra fazer isso:

    #modulo {
     .rounded_corner(){ border-radius: 5px; }
    }
    
    div {
        #modulo > .rounded_corner();
    }
    

    Abraços!

  8. Gilmar 22/06/2012 at 10:50 #

    Muito bom o post, ainda não conhecia o LESS pelo que li parece ser bem produtivo.

  9. Eduardo 22/06/2012 at 19:22 #

    O framework bootstrap da twitter utiliza o less como base para criação e customização do mesmo .. muito massa o post.

  10. jose 23/06/2012 at 13:55 #

    Legal.. agora as ide’s precisam integrar estes pré-processadores!! ai sim fica show..

  11. Paulo Silveira 23/06/2012 at 17:04 #

    Oi Jose. Acho mais importante as ferramentas de build suportarem, assim podemos automatizar para o deploy.

  12. Sérgio Lopes 23/06/2012 at 22:20 #

    Concordo, José. Uso Eclipse aqui e o suporte é zero (nunca achei nem plugin de colorir código).

    Pro LESS, até hoje, o que achei melhor foi o Sublime Text que tem um plugin pra colorir: https://github.com/danro/LESS-sublime

    E, Paulo, pra integração gerar é bem fácil, é só rodar o ‘lessc’.

  13. José Volmei Dal Prá Junior 24/06/2012 at 16:01 #

    Legal. Vou estudar mais sobre o assunto. Obrigado pelas dicas e parabéns pelo post.

  14. Henrique S. 26/06/2012 at 11:56 #

    Oi! Achei muito interessante e fiquei empolgado para utilização! Ele é um pouco parecido com o SASS (http://sass-lang.com/) em relação a variáveis, heranças, e outras funcionalidades.
    Só achei estranho no site do LESS informar client-side e não incluiu no Internet Explorer entre os parenteses.
    Vou testá-lo depois, mas se o script não rolar no IE seria péssimo p/ mim, pois 80% do acesso ainda é feito por este navegador. :(
    Ótimo post!

  15. Sérgio Lopes 26/06/2012 at 13:45 #

    É pra funcionar no IE sim… mas eu recomendo fortemente que você compile o .less ao invés de usar a versão JavaScript no browser.

    Abraços

  16. allan 26/06/2012 at 16:10 #

    Muito bom mesmo, pena que não funciona no IE 8/7.

    Neste caso de compilar, acho legal dar uma olhada no http://sass-lang.com/.

    Mas muito legal mesmo e e ainda por cima fosse compatível com o http://selectivizr.com/ realmente iria ser uma super mão na roda!

    Abs.

  17. Alexander Chu 26/06/2012 at 17:47 #

    Caso alguém precise de um compilador para Windows, tem o WinLess:
    http://www.winless.org/

    E parabéns pelo post!

  18. Diogo Machado 27/06/2012 at 14:38 #

    Muito interessante a tecnologia, estou fazendo um post em meu blog sobre ela também. Quando ao IE, assim como o Sérgio Lopes, acho mais interessante compilar o .less

  19. João Henrique 28/06/2012 at 11:03 #

    Realmente bem interessante,torna o CSS estático dinâmico.
    Como citaram ha um imensa necessidade da inclusão do suporte ao less no eclipse e em outras IDES para ser algo totalmente útil e menos burocrático.

  20. Michael Lancaster 03/07/2012 at 12:06 #

    Estou usando faz algum tempo SASS/SCSS, me ajuda muito com OOCSS, mas apesar de ser bem parecido com LESS ainda acho melhor.

    O ponto dos CSS Preprocessors aqui é para nos ajudar, mas vc também pode acabar piorando seu código se não tiver cuidado, como usar nesting selectors, seus seletores podem se torna um lixo (Ex: #id .class .class element).

  21. Diogo Machado 03/07/2012 at 18:21 #

    Então galera, as vezes ficar compilando o código na unha fica chato, então criei um shell com interface gráfica para compilar com lessc no linux, quem quiser, tá no meu Github : http://goo.gl/7E23t

  22. Guido 12/07/2012 at 13:52 #

    Muito bom o post e as discussões que seguem. Galera nota 10.

  23. Eduardo Oliveira 08/08/2012 at 15:17 #

    Muito bom, código mais limpo.

  24. Frederico Maia Arantes 15/08/2012 at 16:44 #

    Já tinha lido a respeito e agora estou começando a usar. Parece ser realmente muito bom usar o Less.

    Sobre suporte das IDE’s o IntelliJ IDEA tem um suporte legal colorindo o less, com autocomplete e tudo mais!

  25. João Reis 30/08/2012 at 10:28 #

    Excelente post!

    Estou aqui tentando resolver minha vida com algumas funçõezinhas do less…. mas me deparei com algo bizarro e travei…

    preciso incluir um “%” ao final da minha função que faz o calculo dos heights num layout responsivo… mas dá erro sempre..ja tentei de tudo…alguém tem alguma dica?

    .responsiveHeight(@target, @contexto){
    @calc:((@target/@contexto)*100);
    height:@calc; /*em que incluir um maldito “%”!!!!! */
    }

    .teste{
    .responsiveHeight(66,320);
    }

  26. Sérgio Lopes 30/08/2012 at 14:06 #

    Oi João! Coloca o % dentro da conta mesmo. Assim:

    @calc:((@target/@contexto)*100%);

  27. Jeferson 03/05/2013 at 16:14 #

    Muito bom seu post! Aprendi muito com ele. Parabéns!

    Gostaria de saber apenas se é errado rodar na página (p/ os navegadores q suportam js) o arquivo .less ou devo compilar para .css e colocar apenas esse.

    Valeu!

  28. VInicius 14/08/2013 at 02:06 #

    Cara muito bom o artigo, estou fazendo alguns testes, e me deparei com um problema, quando eu coloco minhas variaveis em um arquivo separado, ele dá erro falando que a variavel está indefinida(ou não declarada), e quando coloco as variaveis no mesmo arquivo ele funciona, já pesquisei então encontrei nada, você teria uma sugestão?

    Abraço !

  29. Leandro Ribeiro 18/09/2013 at 17:07 #

    Artigo muito bom, claro e objetivo.

    Deixa de sugestão apenas atualizar o artigo com os compiladores para os diversos SOs que a galera comentou.

    Leandro Ribeiro

  30. Alan Nogueira 06/01/2014 at 18:31 #

    Achei bem bacana, mas não me vejo usando isso no dia a dia, pelo menos por enquanto!

  31. Marcius 24/01/2014 at 11:22 #

    se eu tiver, por exemplo,
    .pagination > li > a:hover { background-color: #eeeeee; }

    e quiser aproveitar esse seletor em outra classe, como faço? Tentei assim :

    .outro {
    .pagination > li > a:hover;
    color: red;
    }

    mas não compilou. E não consegui descobrir como fazer isso pela documentação.

  32. Marco Antonio 12/05/2014 at 14:37 #

    O LESS é simplesmente sensacional. Uso ele a um tempo. Apesar de não usar todas as suas funções, as que eu uso me ajudam MUITO.

    Excelente post. (y)

Deixe uma resposta