O Que É um Pré-processador de CSS? Escrevendo CSS Com Mais Poder
Um pré-processador de CSS permite que você escreva folhas de estilo com recursos extras como variáveis, aninhamento e funções, e então as compila para CSS puro.
O CSS puro ganhou recursos ao longo dos anos, mas pré-processadores como Sass e Less chegaram antes e ainda oferecem conveniências de escrita. Você escreve na linguagem do pré-processador, e uma etapa de compilação a transforma em CSS padrão que o navegador entende. Essa etapa de compilação roda no build, tornando-a parte do seu pipeline de CI.
O que os pré-processadores adicionam
- Variáveis para cores, espaçamento e outros tokens.
- Aninhamento que espelha a estrutura do HTML.
- Mixins e funções para reutilizar lógica de estilo.
- Divisão de estilos entre vários arquivos compilados em um só.
Como a compilação funciona
Um compilador como o Dart Sass lê seus arquivos de origem, resolve imports, avalia variáveis e funções, e emite CSS puro. O navegador só chega a ver a saída compilada, nunca a sintaxe do pré-processador.
Pré-processador vs PostCSS
Um pré-processador transforma sua própria linguagem em CSS antes do processamento. O PostCSS transforma o próprio CSS com plugins. Eles não são rivais; muitos projetos rodam um pré-processador e depois o PostCSS para autoprefixing e minificação.
O CSS nativo já alcançou?
O CSS moderno agora tem custom properties e aninhamento nativo, reduzindo a necessidade de pré-processadores. Muitos projetos novos usam CSS puro ou um framework de utilitários no lugar, embora grandes bases de código existentes ainda dependam do Sass.
Pré-processadores no CI/CD
A compilação de CSS roda durante o build e escala com a quantidade de arquivos e a profundidade dos imports. Fazer cache da saída compilada e recompilar apenas os arquivos alterados mantém isso rápido. O CSS compilado, minificado e com hash é parte do artifact que o pipeline faz deploy.
Principais conclusões
- Um pré-processador de CSS adiciona variáveis, aninhamento e funções, compilando para CSS puro.
- Pré-processadores e PostCSS são complementares, não concorrentes.
- A compilação de CSS roda no build e se beneficia do cache da saída no CI.