Pré-processadores de CSS, o futuro da programação

O aparecimento de pré-processadores para CSS é uma das maiores evoluções que se tem vindo a verificar na programação de websites e aplicações web, que foi complementada com o CSS3, tornando-se poderoso

Atualmente existem apenas dois pré-processadores o LESS (Leaner CSS) e o SASS (Syntactically Awesome Style Sheets) que apesar das semelhanças, diferem na sua sintaxe.

A questão que se coloca é: porque devem os pré-processadores para CSS ser usados, deixando para trás o antigo CSS?

Para se usar este tipo de pré-processadores é sempre necessário o recurso a compiladores como o Koala, onde o resultado final será apenas um único ficheiro de CSS, sem comentários e otimizado em apenas uma linha.

Antes de usar CSS é necessário pensar mais a nível de blocos, componentes que podem ser usados, editados várias vezes em código sem repetir o mesmo trabalho vezes e vezes sem conta.

Torna-se um desenvolvimento muito mais rápido, mais barato e muito mais fácil de manter mesmo que seja um projeto trabalhado entre vários programadores.

A curva de aprendizagem é relativamente simples desde que exista um bom conhecimento de CSS, uma vez que assim que se entende as funcionalidades que existem é apenas uma questão de horas até a programação começar a ser fluída.

Existem várias funcionalidades importantes no uso de pré-processadores, mas as que mais se destacam são a possibilidade de variáveis, nesting, mixins, extensão de objetos mas o que faz exatamente cada uma?

Variáveis

Quando usamos SASS ou LESS o desenvolvimento do site é mais rápido, pois é possível o uso de variáveis globais onde se define @amarelo #fcff00; e sempre que houver necessidade de usar esta cor é escusado ir novamente à maquete de Photoshop para ter o código hexadecimal.

Correndo o risco de copiar o valor errado, a partir de agora em todo o projeto @amarelo irá sempre corresponder ao pretendido.

Esta funcionalidade pode ser também usada para tamanhos de ecrãs quando se configura para o responsive, @mobile = 480px, @tablet = 768px o que até se pode tornar útil, caso estes tamanhos venham a mudar no futuro com o constante crescimento de ecrãs nos dispositivos móveis.

Nesting

O Nesting é o que nos permite programar mais rápido e evitar estar sempre a escrever os mesmos seletores constantemente, o código desenrola-se numa ação simplesmente natural.

Há quem organize o código de uma maneira hierárquica mas com o Nesting basta abrir o seletor mais de topo e ir colocando cada seletor como se fosse dependente do anterior.

É exatamente um sistema de escada. Bastante prático e acima de tudo lógico porque cada sítio está arrumado no seu devido lugar tornando-se bastante rápido de encontrar o que procuramos.
#main {…    .post {…        .post-header {…            h2 { … }            a {…                &:visited { … }                &:hover { … }            }        }    }}

Mixins

Permite a compatibilidade de elementos CSS3 e evita a escrita de por exemplo: border-radius: 3px; -moz-border-radius:3px ; -webkit-border-radius: 3px; e que se passe apenas a escrever .RoundBorders(3px) e quando o ficheiro LESS ou SASS passa pelo compilador vai escrever a compatibilidade para todos os browsers, fantástico não é?

Escrever um seletor de gradientes torna-se bastante mais fácil com o seletor .gradient(#F5F5F5, #EEE, #FFF).

Os Mixins evita que seja necessário decorar todos os prefixos existentes para cada browser, que é das partes mais chatas do CSS3, quando ainda é preciso desenvolver sites do Internet Explorer 8 para baixo.

Extensão

Quando se passa em CSS de uma maneira modular, escrevem-se classes que podem ser repetidas ao longo de todo o código.

Por exemplo ao ter uma classe chamada .left que faz um float left e um background-color: #000 quando existe a necessidade de ser usada constantemente, dentro de outros seletores, torna-se muito mais prático .selector { .left(); border-left: 1px solid #DCDCDC.

Por uma questão de prática se houver necessidade do float passar a ser para a direita, apenas é necessário alterar num local, em vez das centenas e centenas de linhas de código que possa existir.

A verdade é que os pré-processadores de CSS facilitam em diversos tópicos o trabalho de programação, e vieram para ficar. Por isso, torna-se urgente a necessidade de compreender a fundo todas as suas funcionalidades.