O que são pré-processadores CSS e por quê usar?

No items found.
22/1/2020
Eduardo Ribeiro
Eduardo Ribeiro
Front-end Developer

Apaixonado por tecnologia e inovação

Está sem tempo para ler? Aperte o play para escutar o artigo.

Antes de falarmos sobre os pré-processadores precisamos entender a dor que eles vieram curar. Para entender isso, temos que voltar um pouco e falar sobre o nosso tão amado CSS, usado para estilizar páginas web.

CSS, Cascading Style Sheets

O CSS está no mercado a mais de 20 anos cumprindo bem o seu papel, mas possui algumas limitações, além de nos forçar a realizar alguns processos repetitivos, como minificação de código, que é pegar o seu código CSS “bonitinho”, identado, com quebras de linhas e as vezes separados em vários arquivos e simplesmente juntar tudo em um só, na maioria das vezes em uma única linha de código e utilizando o mínimo possível de espaços.

É praticamente inviável a manutenção por humanos desse processo, mas tem uma vantagem: o download do arquivo pelos navegadores é mais rápido e como consequência a aplicação carrega rapidamente.

Como muitos adotam a criação de um único arquivo CSS por projeto para facilitar esse processo, era bastante comum você se deparar com arquivos de 3 a 5 mil linhas de código, com muito código repetitivo tornando a sua manutenção bem árdua.


pré-processadores CSS
Veja um exemplo de como era feito

De maneira resumida, foi nesse cenário que surgiram os primeiros pré-processadores CSS.

Com os pré-processadores você pode automatizar essa minificação de arquivos, ao invés de usar algum site ou script para juntar todos os arquivos e em seguida realizar a minificação, além de muitos outros poderes que virão juntos.

Um exemplo:

  • Criação de variáveis (hoje já é possível criar com CSS também)
  • Condicionais
  • Laços de Repetição
  • Importação de Arquivos
  • Funções
  • E até herança

Vamos entrar agora um pouco mais a fundo em o que é, afinal, pré-processador.

O que são pré-processadores?

De forma resumida: são interpretadores de código. Eles leem todo o código gerado e convertem para CSS minificado ou não, dependendo da sua configuração, mas normalmente configuramos para já nos dar o resultado minificado.

Exemplo de CSS minificado

Por que usar?

Primeiramente pelo poder que eles te dão.

Como assim? 

Como no final tudo será CSS, você não estará perdendo nada e ainda ganhando novas possibilidades de uso, podendo organizar seu código em módulos e reutilizando muito código. 

módulo com SASS
Organização em módulos com SASS


arquivo main.scss
No arquivo main.scss ou index.scss você importa todos os seus módulos


Principais vantagens em usar pré-processadores

No fim, o ganho em produtividade, organização e rapidez em manutenção de código justificam a experimentação do uso de pré-processadores. 

Hoje, não consigo me ver trabalhando em um projeto de médio/grande escala sem o uso deles. São viáveis até mesmo para pequenos projetos por causa da facilidade. 

Vale lembrar que são independentes de frameworks como Angular, React, Vue, entre outros, embora em alguns casos eles possam estar acoplados, podem ser usados de forma isolada em sites estáticos, por exemplo.


SASS, LESS e Stylus

Hoje, são os 3 principais players do mercado que recomendo. Além de serem confiáveis, possuem uma curva de aprendizado pequena, já que sabendo a base de CSS é o suficiente pra você se virar bem com eles.

E você, já usou algum deles? Se ainda ficou com alguma dúvida no assunto, é só deixar nos comentários.

O que você achou deste conteúdo?
Quer receber nossos conteúdos?
Seu cadastro foi efetuado com sucesso! Enviaremos as novidades no seu email.
Oops! Something went wrong while submitting the form.