Skip to content
Latchkey

PostCSS vs Sass: qual ferramenta CSS?

PostCSS é um transformador de CSS baseado em plugins que você compõe; Sass é um pré-processador completo com sua própria sintaxe e recursos de linguagem.

PostCSS é um pipeline de transformação: ele faz o parse do CSS e roda plugins (Autoprefixer, nesting, future-CSS, Tailwind) para que você escolha exatamente os recursos que quer. Sass é um pré-processador completo, com sua própria linguagem, mixins e funções embutidos. Eles costumam ser usados juntos (o Tailwind roda sobre o PostCSS), mas como alternativas o PostCSS vence em modularidade e ferramentas de CSS moderno; o Sass vence em recursos de linguagem embutidos e ricos.

PostCSSSass
ModeloPipeline de pluginsPré-processador completo
RecursosO que você adicionar via pluginsLinguagem embutida
AutoprefixingVia plugin AutoprefixerExterno
ComposabilidadeAlta (a la carte)Monolítica
Melhor paraCSS moderno, Tailwind, prefixingMixins, funções, abstrações

Caso de uso e arquitetura

PostCSS serve a equipes que querem um pipeline composável: autoprefixing, sintaxe future-CSS e ferramentas como o Tailwind, adicionando apenas os plugins de que precisam. Sass serve a equipes que querem uma linguagem de pré-processador completa com mixins e funções prontos. Muitos projetos usam os dois, com o PostCSS cuidando do prefixing e das ferramentas.

Build e CI

Ambos rodam como etapas de build; a ordem dos plugins do PostCSS importa e pode revelar erros de configuração no CI. Qualquer um roda em runners gerenciados, onde runners mais rápidos encurtam o processamento de CSS dentro do build do frontend.

O veredito

Quer um pipeline composável, guiado por plugins, com autoprefixing e suporte a CSS moderno: PostCSS. Quer uma linguagem de pré-processador completa com mixins e funções: Sass. Eles se complementam; como alternativas, escolha PostCSS pela modularidade e Sass pelo poder de linguagem embutido.

Guias relacionados