Aprendendo LESS CSS

29 Abr 2011

Para quem não conheçe, hoje eu gostaria de falar do LESS CSS.

Less é um projeto criado para facilitar a escrita do CSS, seria muito bom se o W3C incluisse alguma das funcionalidades que o LESS proporciona, mas enfim, vou tentar mostrar de uma forma prática como ele pode ajudar no desenvolvimento, os pontos fortes e os fracos.

Esse é o site do projeto: http://www.lesscss.org infelizmente não temos documentação em português, eu entrei em contato com o desenvolvedor para ver se seria possível traduzir, vamos aguardar o que ele tem a dizer.

Para que usar uma nova forma?

Eu diria que para agilizar o desenvolvimento e o entendimento de código. O LESS não altera a forma do CSS, apenas facilita como se escreve.

Sintaxe

// Código escrito em LESS

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

/* Código gerado em CSS */

#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

O quadro acima, mostra como usar variáveis, porém isso é apenas uma forma de como o LESS nos ajuda no desenvolvimento, existem várias outras vantagens!

Pontos Fracos

Um dos pontos fracos que eu vejo para o uso, é a baixo suporte para a sintaxe. Para desenvolvimento de código eu utilizo o Coda nativamente ele não tem suporte para LESS (espero que no próximo release), porém já desenvolveram um plugin que acrescenta a sintaxe do LESS ao Coda.

Outro ponto fraco do LESS, é que se você utilizar ele compilando-o por javascript e o usuário tiver o javascript desabilitado, o site ficará sem css, a não ser que você faça algum if pra saber qual arquivo será enviado para o client.

Pontos Fortes

A rápida adoção, o LESS vem sendo muito utilizado ultimamente, principalmente pela comunidade Ruby on Rails.

Como é algo muito fácil de se aprender vale a pena gastar algumas poucas horas estudandos novas tecnologias.

Para quem quiser testar uma forma bem fácil de começar é utilizando um compilador: http://incident57.com/less/ (existe pra MAC e Windows)

Comentários

Cynthia escreveu em 03/05/2011 às 00:54:07

Valeu pela simplicidade. Já tem um tempão que ouço falar disso, já abri uns 10k de tutos mas sem coragem de ler até o final. Acho que vale a pena aprender sim. Mas há um bom ganho de performance para o site usando o less? Compensa o trabalho de ter que desenvolver 2 folhas (um less e outro css normal para os com .js desabilitados)?

Ronildo Costa escreveu em 03/05/2011 às 12:42:51

@Cynthia não vejo a necessidade, normalmente sites com o JS desabilitados não funcionam muito bem. E além do mais é super complicado ficar mantendo os dois arquivos.

ze escreveu em 08/09/2011 às 11:02:11

Compile o less para css : http://incident57.com/less/

Ronildo Costa escreveu em 08/09/2011 às 11:19:19

@ze nao entendi o seu comentário... na última linha do artigo eu coloquei esse link.

Bruno escreveu em 30/03/2012 às 10:15:46

O ganho do LESS é no tempo de desenvolvimento, devido a essa possibilidade de reaproveitar código. Em termos de desempenho, se o estilo for servido em .less e compilado no browser, o desempenho com certeza será mais lento, já que é necessário um passo a mais para exibir os estilos .css No entanto, podemos compilar os arquivos de .less em .css para colocar o app/site em produção. Eliminando a dependência do js no browser, a lerdeza e ganhando em tempo de desenvolvimento.

Joomla components by Compojoom

Ronildo Costa - Joomla - CSS - Tecnologia - Profissional de Joomla