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.
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 CSS?
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.
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.
@import “modules/shared/variables”;
@import “modules/shared/fonts”;
@import “modules/overrides/globals”;
@import “modules/overrides/calendar”;
@import “modules/overrides/radio”;
@import “modules/overrides/table”;
@import “modules/buttons”;
@import “modules/utils”;
@import “modules/card”;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.
