Cinco Funcionalidades do Sass que Pode Substituir por CSS

Se utiliza o Sass há anos, já conhece o valor que ele traz: variáveis, aninhamento (nesting), funções de cor e uma forma mais organizada de estruturar folhas de estilo. Mas o CSS moderno alcançou-o discretamente. Várias funcionalidades que outrora exigiam um pré-processador e uma etapa de build são agora nativas, bem suportadas e prontas para produção.

Este artigo não é um argumento para abandonar completamente o Sass. Ele continua imbatível para lógica em tempo de compilação, loops, maps e funções complexas. Mas se mantém uma dependência do Sass principalmente pelas cinco funcionalidades abaixo, o CSS nativo provavelmente pode assumir o seu lugar.

1. CSS Custom Properties Substituem Variáveis Sass

Sass:

$primary: #3498db;
.button { background: $primary; }

CSS Nativo:

:root { --primary: #3498db; }
.button { background: var(--primary); }

As CSS custom properties são amplamente suportadas pelos browsers modernos e fazem algo que as variáveis Sass não conseguem: são resolvidas em runtime, e não em tempo de compilação. Isto significa que pode atualizá-las com JavaScript, restringi-las ao escopo de um componente ou sobrepô-las dentro de uma media query. Para temas e UI dinâmica, são mais capazes do que $variables.

A contrapartida: as variáveis Sass continuam úteis quando precisa que um valor exista apenas em tempo de build, ou quando alimenta valores em loops e condicionais que o CSS não consegue expressar nativamente.

2. Nesting Nativo do CSS Substitui o Nesting do Sass

Sass:

.card {
  padding: 1rem;
  &:hover { background: #f5f5f5; }
  .card__title { font-size: 1.25rem; }
}

CSS Nativo:

.card {
  padding: 1rem;
  &:hover { background: #f5f5f5; }
  & .card__title { font-size: 1.25rem; }
}

O nesting CSS tem agora amplo suporte nos browsers modernos. A sintaxe é quase idêntica à do Sass, embora seja boa prática prefixar seletores de tipo ou de classe aninhados com & para maior clareza. O nesting nativo é interpretado pelo browser e utiliza internamente um comportamento de especificidade no estilo :is(), pelo que não é um clone perfeito do Sass, mas para a maior parte da estilização ao nível de componentes as diferenças são mínimas. Se utiliza o Sass apenas para nesting, esta é a funcionalidade mais fácil de substituir.

3. color-mix() Substitui as Funções de Cor do Sass

Sass:

$primary: #3498db;
.button { background: darken($primary, 10%); }

CSS Nativo:

:root { --primary: #3498db; }
.button { background: color-mix(in srgb, var(--primary) 80%, black); }

O color-mix() é amplamente suportado nos browsers atuais e permite derivar variantes mais claras, mais escuras e misturadas a partir de uma única cor base. Não é uma substituição direta de um para um para darken() ou lighten() — estas funções ajustam a luminosidade no espaço HSL, enquanto o color-mix() mistura duas cores — mas para a maioria dos casos de uso práticos num design system, cobre o mesmo terreno. Para uma maior paridade com os ajustes baseados em HSL, pode misturar no espaço de cor hsl: color-mix(in hsl, var(--primary), black 10%).

4. @layer Substitui Soluções Alternativas para Especificidade

Os programadores Sass escrevem frequentemente estruturas intrincadas de seletores para gerir a especificidade. O CSS @layer tem agora amplo suporte nos browsers modernos e dá-lhe controlo explícito sobre a ordem da cascata sem recorrer a truques de especificidade:

@layer base, components, utilities;

@layer base { a { color: blue; } }
@layer utilities { .text-red { color: red; } }

Os utilitários ganham sempre sobre os estilos base — não pelo peso do seletor, mas pela ordem das layers. Esta é uma solução mais limpa do que qualquer alternativa que o Sass pudesse oferecer para a gestão da cascata.

5. @property Substitui Soluções Alternativas para Variáveis Tipadas

O @property é agora suportado nos browsers modernos atuais e permite registar custom properties com um tipo, valor inicial e comportamento de herança:

@property --hue {
  syntax: '<number>';
  initial-value: 220;
  inherits: false;
}

Isto permite animar custom properties e evita heranças inesperadas — algo que as custom properties simples do CSS não conseguem fazer por si só. O suporte dos browsers é mais recente do que para as outras funcionalidades deste artigo, pelo que deve verificar os browsers-alvo antes de depender fortemente desta funcionalidade em produção.

O Que o Sass Ainda Faz Melhor

O CSS nativo não tem equivalente para @each, @for, @if ou para a lógica complexa de @function. Se o seu Sass gera classes utilitárias, constrói escalas de espaçamento de forma programática ou contém saídas condicionais, mantenha o Sass. Note também que o @import do Sass está descontinuado — use o sistema de módulos @use e @forward em vez disso.

Conclusão

Para variáveis, nesting, manipulação de cores, controlo da cascata e propriedades tipadas, o CSS moderno é agora suficiente para muitas tarefas de estilização do dia a dia. Faça uma auditoria do que está realmente a usar do Sass. Pode descobrir que a etapa de build está a resolver menos problemas do que costumava. O Sass continua a justificar o seu lugar para lógica programática, mas no que toca a preocupações quotidianas de estilização, o CSS nativo encurtou a distância.

FAQs

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..