Finalmente passamos a utilizar LESS aqui no blog, e neste post irei falar brevemente sobre esta ótima ferramenta, expor suas principais vantagens e mostrar como fizemos aqui no Loop Infinito.
Pra quem ainda não conhece
LESS é tida como a linguagem dinâmica de estilos, e diferente de CSS – que é totalmente estática –, LESS estende vários recursos dinâmicos como variáveis, mixins, operações e funções.
“Mas como isto é possível?”
Simples, há duas maneiras de colocar seu código LESS em produção numa página:
- Compilando para CSS: LESS possui um compilador, com ele é possível gerar arquivos
.cssequivalentes a partir de arquivos.less– é implementado em Node.js (também existem compiladores LESS em outras linguagens). - Utilizando o interpretador JS: Também podemos apenas incluir arquivos
.lessem nossas páginas e utilizar o interpretador JavaScript que realizará uma análise do LESS e modificará os estilos dos elementos da página on the fly.
“OK, mas então terei de aprender uma nova linguagem?”
Calma lá veloz, a sintaxe de LESS é muito parecida com CSS. Na verdade, LESS se trata de um CSS turbinado (odeio esta palavra, mas é o jeito), pois tem tudo que há em CSS e mais um monte de funcionalidades super úteis. Um exemplo? Quem nunca desejou variáveis em CSS? Imagine poder guardar aquele valor hexadecimal super chato#A9D73C de uma cor em uma variável @cor-link e depois, quando precisar desta cor, apenas referenciar a variável @cor-link em qualquer parte do código CSS. Ex.:
#the-beatles { color: @cor-link }
Pois é, LESS te dá isso e muito mais.
Hora de fuçar
Não entrarei em detalhes sobre como usar os recursos de LESS neste post, pois para a vossa felicidade, nós traduzimos a documentação do LESS para português! Trata-se de um dos projetos do Loop Infinito – e por falar nisso, vocês já deram uma olhadinha na nossa nova página de Projetos? Brevemente teremos mais coisas interessantes por lá ;)
Então pessoal, sem desculpas! Tem tudo lá, e bem explicado. Visitem: lesscss.com.br.
Menos é mais
- Mais manutenibilidade
- Mais simplicidade
- Mais organização
- Mais velocidade
- Mais beleza
Aqui no Loop Infinito, como estava tudo escrito em CSS antes, tive que trabalhar todos os estilos novamente, transformando tudo em LESS. Mas é um pequeno esforço que vale totalmente a pena. Eis o antes e o depois:
Antes
Haviam 4 arquivos CSS: blog.css (estilos gerais), code.css (highlight de códigos), projetos.css (página Projetos) e sobre.css (página Sobre). Isso quer dizer que basicamente qualquer página do blog incluía pelo menos 2 arquivos cada – blog.css tem que estar presente em todas as páginas, já as páginas dos posts incluem code.css; Projetos e Sobre incluem projetos.css e sobre.css respectivamente. Ou seja, 2 requisições a mais para cada clique de todo mundo que visita o blog.
Depois
Transformamos cada arquivo CSS em LESS e em blog.less importamos todos os outros arquivos. Dessa forma, é gerado apenas um arquivo blog.css que contém os estilos de todos os arquivos .less. Assim diminuímos o número de requisições para apenas 1 – já que todas as páginas apenas incluirão blog.css agora. Percebam também que devido ao minify depois da compilação, ainda conseguimos economia em bytes – saímos dos 19KB para 18KB –, e ainda que a economia seja mínima, isso serve para provar que só há o que ganhar usando LESS.
Recentemente comecei um novo projeto e não cometi o erro de postergar o uso do LESS novamente, já comecei utilizando-o desde o nascimento do projeto, e vou dizer uma coisa: é muito mais melhor de bão!