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.
Programação, Mobile, Front-end, Design & UX, Infraestrutura e Business
Legal!
Não conhecia o LESS, achei muito interessante para reaproveitamento de código, e gostei muito pela sintaxe ser bem simples.
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?
José Volmei Dal, para Java também tem Less, de uma olhada nesse site que explica como integrá-lo: http://www.asual.com/lesscss/
Fantástico! Eu também não conhecia o LESS e achei muito interessante por ser simples e muito útil.
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
}
COOL
Oi Douglas!
Você tá pensando em reaproveitar código de mixins dentro de mixins? Se for, isso aqui funciona:
Ou você tava pensando mais na ideia de ter mixins num escopo menor? Porque tem um recurso de namespaces no LESS pra fazer isso:
Abraços!
Muito bom o post, ainda não conhecia o LESS pelo que li parece ser bem produtivo.
O framework bootstrap da twitter utiliza o less como base para criação e customização do mesmo .. muito massa o post.
Legal.. agora as ide’s precisam integrar estes pré-processadores!! ai sim fica show..
Oi Jose. Acho mais importante as ferramentas de build suportarem, assim podemos automatizar para o deploy.
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’.
Legal. Vou estudar mais sobre o assunto. Obrigado pelas dicas e parabéns pelo post.
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!
É 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
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.
Caso alguém precise de um compilador para Windows, tem o WinLess:
http://www.winless.org/
E parabéns pelo post!
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
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.
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).
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
Muito bom o post e as discussões que seguem. Galera nota 10.
Muito bom, código mais limpo.
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!
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);
}
Oi João! Coloca o % dentro da conta mesmo. Assim:
@calc:((@target/@contexto)*100%);
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!
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 !
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
Achei bem bacana, mas não me vejo usando isso no dia a dia, pelo menos por enquanto!
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.
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)
Que bacana! Eu estava cogitando começar a aprender Sass mas o Less me pareceu mais interessante.
Realmente, é um parto ficar “catando” propriedades iguais para colocá-las todas juntas uma única vez, tem que fazer várias revisões do css pra “limpá-lo”.
O uso de variáveis otimiza esse trabalho!
Postagem de 2012 e eu lendo agora em 2015 mas com a mesma surpresa e encanto de quem leu em 2012 ótima matéria gostei muito estava indeciso sobre qual Pré-Processador eu poderia estudar entre o Sass e Less e depois dessa matéria já tenho minha decisão vou ficar com Less mesmo! Parabéns Sérgio!!!
Não tem como, por exemplo, escrever: “margin, padding: 0;” ou algo do tipo?
Super bacana! Vou usar no meu TCC, haha
🙂
MUITO BOM