CSS vs Sass: qual abordagem de estilização?
O CSS puro agora tem variáveis, aninhamento e layers nativamente; Sass é um pré-processador que adiciona mixins, funções e mais poder em tempo de compilação.
O CSS moderno absorveu muitos recursos antes exclusivos do Sass: custom properties, aninhamento nativo, cascade layers e container queries, muitas vezes eliminando a necessidade de um pré-processador. O Sass ainda adiciona mixins, funções, loops, partials e ferramentas de módulos maduras em tempo de compilação que o CSS nativo não tem. O CSS vence em simplicidade e ausência de etapa de build; o Sass vence em abstrações avançadas em tempo de compilação e organização de folhas de estilo em larga escala.
| CSS | Sass | |
|---|---|---|
| Etapa de build | Nenhuma | Obrigatória (compilação) |
| Variáveis | Custom properties nativas | Compilação + runtime |
| Aninhamento | Nativo (navegadores modernos) | Sim (compilado) |
| Mixins/funções | Não | Sim |
| Melhor para | Estilização simples, sem build | Folhas de estilo grandes e abstraídas |
Caso de uso e ferramentas
O CSS puro serve a projetos que querem zero build para estilos e podem contar com recursos nativos modernos. O Sass serve a bases de código grandes que querem mixins, funções, loops e partials para manter folhas de estilo complexas DRY e organizadas. A diferença diminuiu à medida que o CSS adota aninhamento e layers.
Build e CI
O Sass adiciona uma etapa de compilação; o CSS puro não. Ambos fazem build em runners gerenciados, onde runners mais rápidos encurtam a compilação do Sass como parte do build do frontend.
O veredito
Quer estilização simples, sem build, com recursos nativos modernos: CSS puro. Quer mixins, funções e organização em larga escala em tempo de compilação: Sass. À medida que o CSS nativo cresce, muitas equipes abandonam o Sass; folhas de estilo grandes, legadas ou pesadas em abstração ainda se beneficiam dele.