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

Postado em 21. jun, 2012 por Sérgio Lopes em Web Design

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.

Sérgio Lopes (Google+)

Mais sobre o autor

Tags: css, less, wd-43

29 Respostas para “CSS fácil, flexível e dinâmico com LESS”

Rodrigo Ferreira

21. jun, 2012

Legal!

Não conhecia o LESS, achei muito interessante para reaproveitamento de código, e gostei muito pela sintaxe ser bem simples.
José Volmei Dal Prá Junior

21. jun, 2012

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?
Caio Ribeiro Pereira

21. jun, 2012

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

21. jun, 2012

Fantástico! Eu também não conhecia o LESS e achei muito interessante por ser simples e muito útil.
Douglas Rossignolli (@xdougx)

21. jun, 2012

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
}
Filipe

21. jun, 2012

COOL
Sérgio Lopes

21. jun, 2012
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!
Gilmar

22. jun, 2012

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

22. jun, 2012

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

23. jun, 2012

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

23. jun, 2012

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

23. jun, 2012

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’.
José Volmei Dal Prá Junior

24. jun, 2012

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

26. jun, 2012

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!
Sérgio Lopes

26. jun, 2012

É 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
allan

26. jun, 2012

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.
Alexander Chu

26. jun, 2012

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

E parabéns pelo post!
Diogo Machado

27. jun, 2012

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
João Henrique

28. jun, 2012

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.
Michael Lancaster

03. jul, 2012

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).
Diogo Machado

03. jul, 2012

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
Guido

12. jul, 2012

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

08. ago, 2012

Muito bom, código mais limpo.
Frederico Maia Arantes

15. ago, 2012

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!
João Reis

30. ago, 2012

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);
}
Sérgio Lopes

30. ago, 2012

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

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

03. mai, 2013

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!