Desenvolvimento de temas de WordPress usando LESS

Os profissionais mais bem remunerados e referenciados em suas áreas de atuação dominam as mais novas tecnologias, isso é regra em qualquer profissão, conhecimento nunca é demais, precisamos estar sempre atento as tendências para evitar que uma onda nos jogue para “fora do mercado”. Após (milhares de) anos fazendo HTML e CSS eu diria que me acomodei como profissional, estava sempre adiando meus estudos de novos tecnologias, por preguiça mesmo, quando conheci uma pessoa com um conhecimento incrível em CSS e front-end development, Luiz Tanure, quando recentemente trabalhamos juntos, mas não no mesmo projeto, em um agência em São Paulo.

Sua paciência e seu gosto por ensinar abriram minha mente para novas tecnologias, que apesar de ainda não terem sido adotadas como padrão no mercado,  são vistas como diferencial no curriculum dos melhores profissionais. Ele me ensinou muita coisa, mas nesse texto vou tratar de LESS, eu nem sabia que isso existia há algumas semanas e agora estou aqui escrevendo um post para passar esse conhecimento, que ele pacientemente me ensinou, para vocês.

O que é LESS?

A tradução literal da palavra less significa menos, não é a toa que foi escolhida como acrônimo dessa linguagem, se escrever mais linhas de código de CSS com muito menos linhas dessa nova linugagem. O LESS é uma pseudo-linguagem de programação, simula tudo aquilo que você sempre quis no seu CSS, é lindo de morrer, adiciona:

  • Variáveis – Esqueça o comando de encontrar e substituir strings para trocar aquela cor, você pode realmente definir variáveis.
  • Mixins
  • Operadores – Bem simples, agora é possível somar, multiplicar, etc.
  • Funções – Como são poderosas funções (bem escritas), programadores experientes vão deitar e rolar com essa nova funcionalidade.

Tudo isso parece tão óbvio, o CSS precisava dessa sobre-vida, eu mesmo não aguentava mais escrever aqueles códigos corridos e repetitivos. Tudo isso parece muito bom, mas e a implementação desse trem, será que é tão fácil quanto parece? Em primeiro lugar o LESS na verdade é só um jeito de escrever um código que vai gerar o mesmo CSS que você já está acostumado, ele não substitui seu velho conhecido, ele apenas é uma linguagem que, depois de compiladas, gera seus arquivos de CSS tradicionais. É de fácil implementação sim, mas eu confesso que demorei muito tempo para conseguir compilar meu primeiro código dentro de um tema de WordPress, mas você pode aprender o caminho das pedras lendo pacientemente e cuidadosamente esse artigo.

LESS ou SAAS

O mercado ainda não escolheu seu padrão, como na época da briga do BluRay e do HD-DVD, qualquer escolha por uma tecnologia incipiente corre o risco de “escapar da curva” da noite para o dia, mas a vantagem é que as duas tecnologias são muito parecidas e quem sabe uma aprende rapidamente a outra. Poderia enumerar diversos motivos pelos quais eu escolhi LESS, mas um leitor atento poderia rebater todos, apontando vantagem do SASS, então vou dizer simplesmente que escolhi por intuição. Além disso, uma busca no site da apinfo por vagas abertas em LESS, mostra que profissionais com esse conhecimento estão muito bem cotados.

WordPress e LESS

Como de costume gosto de fazer uma introdução no tema antes de sujar as mãos com o código, confesso que tive muita dificuldade em conseguir usar o LESS no WordPress, não conseguia compilar meu arquivo por nada nesse mundo, bati muito a cabeça na parede até encontrar a solução, que vou compartilhar de mão beijada. Mas antes você precisa saber que existem dois tipos de compiladores, o que compila o código a cada acesso no site, e o pré-compilador, que é compilado pelo sistema. Vou cobrir o segundo, que é mais simples e eficiente em termos de processamento e cache. Lembrando que estamos falando de desenvolvimento de temas, não de plugins.

Referências

https://github.com/oncletom/wp-less – Documentação oficial do plugin Wp-Less (em inglês)

https://github.com/oncletom/wp-less/wiki/Embedding-within-a-WordPress-Theme#Basics%20of%20embedding – Usando o plugin para embedar LESS no seu tema. (em inglês)

https://lesscss.loopinfinito.com.br – Documentação oficial traduzida

https://carlorizzante.com/2011/how-to-implement-less-in-wordpress-first-approach/ – Tutorial como usar o LESS com compilador de javascript (sem plugin) (em inglês)

https://en.wikipedia.org/wiki/LESS_(stylesheet_language) – Wikipedia (em inglês)

https://tommcfarlin.com/using-less-in-wordpress/ – Dicas de um programador (em inglês)

https://codex.wordpress.org/Function_Reference/wp_enqueue_style – (nova) Função padrão do WordPress para incorporar scripts nos temas.