Pré-processadores de CSS

Você já deve ter ouvido falar dos Pré-processadores de CSS (LESS, SASS, Stylus), mais você está utilizando eles em seus projetos?

Neste post irei abordar os principais pontos positivos e negativos dos pré-processadores, além de listar as principais opções disponíveis no mercado atualmente.

O que são pré-processadores de CSS?

Tentarei explicar da forma mais simples possível.

Com um software especifico instalado na sua maquina você poderá gerar versões mais complexas das suas folhas de estilos.

Por exemplo, você tem o arquivo de estilo “main.css”, com o pré-processador LESS, você irá criar o arquivo “main.less”.

Dentro do “main.less” será possível criar condições, variáveis, lógicas básicas, realizar cálculos, tudo isso dentro do seu arquivo “css”.

Obviamente os navegadores não reconhecem nada disso, então após finalizado o seu arquivo “main.less”, você terá que converte-lo para “css” puro que é o interpretado pelos navegadores.

Principais vantagens dos pre-processadores são:

• Código mais limpo e organizado
• Utilização de variáveis, lógica e realização de cálculos
• Fácil manutenção e reaproveitamento
• Você pode organizar seu CSS em vários arquivos e unificá-los na “copilação”.
• Funções por meio dos “mixin”
• Heranças por meio dos “placeholder”.
• e muito mais..

Os melhores pre-processadores

Lista com os melhores e mais utilizados pre-processadores de CSS disponíveis atualmente.

Sass: Syntactically Awesome Style Sheets

SASS é a opção mais popular atualmente, com uma grande comunidade de desenvolvedores é a solução mais “madura” e estável. Alguns frameworks de desenvolvimento utilizam o SASS como Compass, Bourbon, Susy entre outros.

Você pode utilizar o SASS de duas formas, por comandos ou softwares com interface.

Conheça mais neste link: SASS Install.

Less

LESS é um dos pre-processadores mais utilizados atualmente, desenvolvido em Javascript e de código fonte aberto é uma excelente opção para o seu projeto.

Você precisará do node.js para instalar e utilizar os comandos do LESS.

Site oficial: lesscss.org.

Você pode experimentar o LESS neste link: Less2css.org.

Pontos negativos na utilização dos pré-processadores

O principal problema na utilização dos pré-processadores é a sua complexidade.

Até então o CSS é bem simples e para muitos desenvolvedores “frontend” isso é extremamente importante pois em muitos casos esse pessoal vem da área de criação, sem nenhum contato real com a lógica de programação.

Imagina, “herança”, “classes” e “funções” tudo de uma unica vez.

Não é nenhum bicho de 7 cabeças mais o mundo não é perfeito e todos nós sabemos disso, então essa “dificuldade” impede que muitos “desenvolvedores” que atuam com o CSS utilizem os pre-processadores.

Nem tudo é perfeito

Da mesma forma que um péssimo programador irá fazer um CSS porco de baixo desempenho o mesmo vale para os pré-processadores, com uma tendencia a ser muito pior devido a sua complexidade.

CSS está evoluindo

O CSS vem melhorando a cada nova “versão”, você pode acompanhar os trabalhos neste, CSS Current Work e essa evolução é muito importante.

Tanto o SASS como LESS ou qualquer outro pre-processador passará a ser praticamente inútil caso uma nova versão do CSS já venha com suporte nativo aos grandes diferenciais dos pré-processadores.

É claro que isso é só uma suposição mais a tendencia de todas as tecnologias é evoluírem e os pré-processadores estão ai para suprirem uma necessidade no qual pode deixar de existir.

Bootstrap manda lembranças

Você não precisa utilizar um dos pré-processadores de CSS se o layout do seu sistema é praticamente todo Bootstrap.

Se não for necessário nenhum dos recursos como “variáveis” ou “mixin” e for para apenas ficar definindo “font-family”, “color” em meia duzia de classes. esquece meu amigo.

Na minha opinião, os pre-processadores só são realmente uteis para projeto com uma grande quantidade de CSS próprio aonde seus recursos realmente irão fazer a diferença no tempo de desenvolvimento.

Conclusão sobre os Pré-processadores de CSS

Independente se vale ou não apena utilizar um pré-processador de CSS no seu sistema ou site, você tem que conhecer e apreender essa tecnologia.

Pré-processadores estão mais do que consolidados e já são uma exigência nos currículos dos desenvolvedores frontend.

Não é algo novo e podemos até considerar relativamente antigo e caso você queria participar um dia no desenvolvimento de um grande projeto, com toda a certeza você terá que utilizar pelo menos o LESS ou SASS.

Abraços e um bom desenvolvimento!