O desenvolvimento front-end nunca esteve tão dinâmico. Ferramentas como HAML, SASS e ZenCoding vêm revolucionando a maneira como trabalhamos. Em projetos onde qualquer coisa pode mudar a qualquer hora, flexibilidade é um ponto importantíssimo.
O LESS chega nesse barco, adicionando um alto nível de personalização e permitindo recursos de programação em folhas de estilo estáticas. Com a biblioteca, é possível utilizar recursos como variáveis, funções, operações e escopo dentro de simples regras CSS.
Variáveis
Uma das principais funcionalidades do LESS é a criação de variáveis.
Variáveis servem para definir valores padrões para seus projetos e facilitar a manutenção e alteração dos mesmos. As variáveis acima poderiam ser utilizadas em diferentes estilos, por exemplo:
Mixins
Mixin é um conceito de programação orientada a objetos e basicamente representa a utilização de classes dentro de classes. Essas classes não são instanciadas e servem apenas para reaproveitamento de código.
No LESS, mixins são classes/declarações que serão utilizadas dentro de outras classes de estilo.
Variáveis e mixins são as principais ferramentas para evitar uma terrível prática: repetição de código (no nosso caso, repetição de estilos).
Funções
Estendendo o conceito acima, funções são mixins que recebem parâmetros. Os parâmetros podem ter um valor padrão, como o exemplo borda_arredondada abaixo (6px), que será utilizado caso nenhum parâmetro seja passado.
Regra dentro de regra dentro de regra…
Alguns desenvolvedores já aplicam essa técnica visualmente. No entanto, com LESS, as regras aninhadas também herdam os valores de seus “pais”.
Note o símbolo “&” que representa a concatenação. O elemento não herda simplesmente os atributos de seu antecessor, ele também sobrescreve o novo valor. Essa regra é importantíssima para pseudo-elementos como :hover, :focus etc.
Operações
O LESS também permite operações com valores e cores. Por exemplo, é possível multiplicar uma cor hexa-decimal ou dividir uma certa quantidade em pixels.
As funções de cores englobam efeitos como dessaturação e fade.
Para valores compostos, como o border do div#conteudo abaixo, é obrigatório o uso de parênteses.
Na documentação oficial do LESS você encontra uma lista completa das funções para cores.
Escopo & Namespace
Para quem já programa, os conceitos explicados até agora são familiares. O LESS nada mais é do que um framework que transforma o CSS em uma pseudo linguagem de programação.
Escopo é outro conceito importante em programação que também está presente no LESS.
Uma variável possui um escopo global e outro local, dentro de sua função/mixin. O LESS vai sempre procurar primeiro por varáveis no escopo local e depois em seus antecessores.
Você também pode reutilizar apenas uma parte de um mixin aplicando um namespace para encapsular seu código.
O h1 do elemento #header herda apenas o .principal do #titulo.
Implementações
A implementação do LESS pode ser feita on the fly, com JavaScript. Esse método é recomendado para sites pequenos, com pouca audiência. Para sites mais visitados, pré-processe seus arquivos LESS, transformando-os em folhas de estilo estáticas.
Por exemplo, para aplicativos Ruby/Rails existe uma gem que converte arquivos LESS para CSS. Já o o módulo compressor do Django oferece suporte nativo.
Outra solução bacana é o aplicativo LESS para Mac.
E se você procura elementos básicos já prontos, a dica é visitar o site Less Elements. Nele você encontra soluções para bordas, degradês e sombras.