egermano.com

Fala Galera,

Quer compartilhar uma grande descoberta que fiz nesse últimos dias…

Como alguns sabem, eu sai do banco e estou em uma agência digital. Creio que essa foi umas das maiores decisões que tomei nos últimos tempos, mas nada supera a minha decisão por me casar e formar uma família com a Luise. Com essa grande mudança de ambiente e de carreira eu já aprendi várias coisas com a galera aqui da agência e uma delas é o que vou compartilhar com vocês, LESS.

O LESS é uma linguagem que extende o css, ele cria comportamentos como variáveis, funções e até operações (adição, subtração, divisão, entre outras).

A linguagem foi idealizada e implementada por Alexis Sellier (a.k.a Cloudhead), o conceito era criar essa linguagem para substituir o CSS do seu site, mas como os browses só aceitam o CSS como arquivo para formatação de estilo de página ele criou um arquivo em JavaScript que funciona como um interpretador.

A implementação no site é muito simples, saca só:

<link rel=”stylesheet/less” type=”text/css” href=”styles.less”>

<script src=”less.js” type=”text/javascript”></script>

Basicamente você coloca o seu arquivo .less e depois usa o less.js como interpretador.

Analisando e testando um pouco essa linguagem eu achei que esse processo de interpretação que o less.js faz um pouco pesado  pode ser custoso já que isso vai rodar no cliente e depende muito da máquina que o cara tem. Lembrando que o Cloudhead disponibilizou no site do LESS um interpretador Server Side, ou seja, roda do lado do servidor e não no browse, no cliente. Mesmo assim achei o processo do Server Side complexo de se instalar e não muito prático, sem contar que é um processo a mais para rodar no Server mesmo assim.

Aí pesquisando na internet encontrei o LESS.app que é um compilador de LESS (se você não entende muito de programação a essa hora você já dev estar me xingando e falando que é tudo a mesma coisa), ou seja, você compila e transforma o seu arquivo .less em um arquivo .css em tempo de desenvolvimento e não de execução como os outros interpretadores. No site desse app tem um vídeo explicando como ele funciona. O app é gratuito e só funciona e MAC, sorry Wondows Loosers.

Com isso eu virei o mestre do  LESS, sai fazendo todos os CSS e com a produtividade lá no céu, mas eu ainda podia melhorar. Eu sempre usei o TextMate ara desenvolver qualquer coisa, HTML, CSS, JS, PHP, Python, Ruby on Rails e por aí vai e como a maioria dos editores e IDE que tem no mercado ele deixa as letras todas coloridas de acordo com o elemento, instrução, tipo e etc… Mas com o LESS ele não estava funcionando, ficava tudo preto no branco.

Mais uma vez… De volta ao Google.

Encontrei dessa vez um bundle, uma das grandes vantagens do TextMate é que você pode programar em vária linguagens em um

editor só e os bundles são os arquivos que fazem isso funcionar. Você configura as instruções e as formatações que cada parte do seu código deve ter. Dois caras muito firmezas fizeram tudo isso e disponibilizaram no GitHub , esses caras são o Scott Kyle e o Rasmus Andersson.

Nesse pacote além do bundle do TextMate, eles diponibilizam também um compilador para o TextMate, mas eu ainda prefiro o LESS.app.

Para concluir, o seu código fica mais ou menos assim como na imagem acima, com varias variáveis e funções e estruturas de dados e tudo isso que vocês podem ver.

Para aprenderem LESS:

• http://lesscss.org/#docs

Ferramentas que falei nesse artigo:

• TextMate
• LESS.app
• Bundle do LESS para TextMate

Usem LESS, criem seus CSS assim e torne o seu trabalho mais produtivo e organizado.

Comentem e compartilhem esse artigo, pois é isso que torna a internet e todas as redes sociais úteis.

Abraços,