O que é Sass e por que ele existiu antes do CSS mudar

Sass é uma linguagem que gera CSS. Você escreve um arquivo .scss com recursos como variáveis, aninhamento, mixins e módulos; o compilador resolve essas instruções e entrega um .css comum. O navegador não sabe que Sass participou do processo. Ele recebe seletores, propriedades e valores do mesmo jeito que receberia de um arquivo escrito à mão.

Essa diferença evita a primeira confusão de quem começa: Sass não substitui o CSS e não corrige uma base fraca de cascata, especificidade ou layout. Ele automatiza a escrita. Antes desta trilha, vale dominar o que é CSS e saber por que um seletor vence outro em seletores e cascata.

Todos os resultados abaixo foram compilados com Dart Sass 1.103.1. Primeiro, confirmei a versão exata do compilador usado nos exemplos:

npx --yes sass@1.103.1 --version

Nos exemplos curtos, o SCSS foi enviado pela entrada padrão com --stdin, --no-source-map e --style=expanded; o CSS mostrado abaixo é o stdout real.

O CSS de 2010 e o problema que ninguém aguentava mais

Em uma folha grande, o mesmo tom de roxo, o mesmo espaçamento e a mesma regra de botão apareciam dezenas de vezes. CSS não tinha custom properties amplamente usáveis, nesting, módulos ou funções de cor modernas. Alterar a marca exigia buscar valores espalhados; criar variações significava copiar regras.

O Sass apareceu para mover essas decisões repetidas para nomes e operações. A folha a seguir guarda dois valores e os reutiliza. Os nomes existem no código fonte, não no CSS entregue ao usuário:

$brand: #6d28d9;
$space: 1rem;

.card {
  padding: $space;
  border: 1px solid $brand;
}

O $brand desapareceu. Esse detalhe separa uma variável Sass de uma custom property: a primeira é resolvida durante o build; a segunda continua no CSS e pode mudar depois que a página abriu. A lição de variáveis no CSS mostra o outro lado dessa escolha.

Pré-processador é um tradutor, não um framework

Um framework entrega componentes, convenções ou classes prontas. Sass recebe uma entrada e produz outra. Ele não conhece seu botão, não decide cores e não roda no navegador. Se o SCSS tem um seletor ruim, o resultado terá um seletor ruim; se o componente está bem desenhado, o compilador apenas torna a autoria mais curta.

O fluxo cabe em três caixas: entrada.scss → compilador Sass → saida.css. Confira com um mixin, que é uma receita de declarações reutilizável:

@mixin button($bg) {
  background: $bg;
  color: white;
  padding: .75rem 1rem;
}

.button-primary { @include button(#6d28d9); }
.button-danger { @include button(#dc2626); }

O mixin não virou uma função no navegador. Ele foi executado duas vezes e copiou três declarações em cada seletor. Isso é conveniente, mas também explica por que um @include usado sem critério aumenta o arquivo final.

O mesmo componente em CSS e em SCSS, lado a lado

No SCSS, o seletor interno fica visualmente perto do componente. O & aponta para o seletor externo e permite formar a classe BEM e o estado :hover:

.card {
  padding: 1rem;
  border: 1px solid #6d28d9;

  &__title { color: #6d28d9; }
  &:hover { transform: translateY(-2px); }
}

O trecho de entrada ocupa sete linhas; a saída tem três regras distribuídas em dez linhas. Neste exemplo pequeno, Sass não economizou linhas. Ele agrupou o raciocínio. Essa é uma régua mais honesta do que vender o pré-processador como compressão: organização de autoria e tamanho de saída são problemas diferentes.

O que o Sass faz que o CSS nativo ainda não faz

Sass ainda é forte quando um design system precisa gerar muitas variações a partir de dados: percorrer um map, calcular uma escala, montar nomes de classe, compartilhar mixins entre pacotes e expor uma API configurável com @use ... with. O CSS moderno tem recursos poderosos, mas não oferece um loop geral que gere cinquenta utilitários durante o build.

Um loop simples transforma uma lista em seletores:

$spaces: 4px, 8px, 16px;

@for $i from 1 through 3 {
  .p-#{$i} { padding: nth($spaces, $i); }
}

O aviso também ensina algo: código Sass antigo ainda pode compilar, mas a API global nth() está em migração para módulos. Nesta trilha usaremos @use "sass:list" e list.nth(), a forma atual.

O que o CSS nativo tomou de volta: variável, aninhamento, cor

Hoje, custom properties mudam por elemento e por media query; nesting já faz parte do CSS moderno; calc(), min(), max(), clamp() e color-mix() resolvem tarefas antes reservadas a pré-processadores. Este CSS não precisa de Sass para criar tema em tempo de execução:

:root { --brand: #6d28d9; }
[data-theme="dark"] { --brand: #a78bfa; }

.button {
  background: var(--brand);
  &:hover { background: color-mix(in srgb, var(--brand), black 15%); }
}

Esse arquivo é entregue como CSS nativo, sem passar pelo Sass. O valor de --brand permanece no documento e muda quando data-theme muda.

Sass pode conviver com isso. Uma boa fronteira é: use $token quando o valor é fixo para aquela compilação; use --token quando precisa responder ao DOM, ao tema ou a uma escolha do usuário.

SCSS ou a sintaxe indentada: qual você vai encontrar

Há duas sintaxes. .scss usa chaves e ponto e vírgula e aceita qualquer CSS válido. .sass usa indentação, sem chaves. A maioria dos projetos atuais usa SCSS, mas arquivos antigos podem usar a forma indentada.

.card
  padding: 1rem
  &__title
    color: #6d28d9

As duas escritas acessam a mesma linguagem. Não converta um projeto só por preferência estética; mantenha a convenção existente e escolha SCSS em um projeto novo para reduzir atrito com ferramentas e com pessoas que já conhecem CSS.

Vale aprender Sass em 2026?

Vale quando você mantém um produto que já usa Sass, trabalha com um design system baseado em mapas e mixins ou precisa entender bibliotecas que expõem configuração pelo sistema de módulos. Não vale adicionar uma etapa de build a uma landing page pequena apenas para declarar três cores.

Também vale aprender a parte moderna, não decorar o passado. Este código ainda compila, mas produziu dois avisos reais na versão testada:

$brand: #6d28d9;
.old { color: darken($brand, 10%); }

A próxima etapa é instalar Sass e compilar o primeiro SCSS. Depois, a sequência avança de variáveis e aninhamento para mixins, funções, módulos, maps e loops. Se você quiser primeiro enxergar todas as escolhas, use o guia completo de Sass como mapa, não como substituto para praticar.