Cinco funcionalidades de Sass que puedes reemplazar con CSS

Si llevas años usando Sass, ya conoces el valor que aporta: variables, anidamiento, funciones de color y una forma más limpia de organizar las hojas de estilo. Pero el CSS moderno se ha puesto al día sin hacer mucho ruido. Varias funcionalidades que antes requerían un preprocesador y un paso de compilación ahora son nativas, están bien soportadas y listas para producción.

Este no es un argumento para abandonar Sass por completo. Sigue siendo la mejor opción para lógica en tiempo de compilación, bucles, mapas y funciones complejas. Pero si mantienes una dependencia de Sass principalmente por las cinco funcionalidades que se mencionan a continuación, el CSS nativo probablemente pueda reemplazarla.

1. Las custom properties de CSS reemplazan a las variables de Sass

Sass:

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

CSS nativo:

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

Las custom properties de CSS tienen amplio soporte en los navegadores modernos y hacen algo que las variables de Sass no pueden: se resuelven en tiempo de ejecución, no en tiempo de compilación. Esto significa que puedes actualizarlas con JavaScript, limitarlas al ámbito de un componente o sobrescribirlas dentro de una media query. Para temas e interfaces dinámicas, son más capaces que las $variables.

La contrapartida: las variables de Sass siguen siendo útiles cuando necesitas que un valor exista solo en tiempo de compilación, o cuando estás alimentando valores en bucles y condicionales que CSS no puede expresar de forma nativa.

2. El anidamiento nativo de CSS reemplaza al anidamiento de 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; }
}

El anidamiento de CSS cuenta ahora con amplio soporte en los navegadores modernos. La sintaxis es casi idéntica a la de Sass, aunque es buena práctica anteponer & a los selectores de tipo o clase anidados para mayor claridad. El anidamiento nativo es analizado por el navegador y utiliza internamente un comportamiento de especificidad similar al de :is(), por lo que no es un clon perfecto de Sass, pero para la mayoría del estilado a nivel de componente las diferencias son menores. Si solo usas Sass para anidar, esta es la funcionalidad más fácil de reemplazar.

3. color-mix() reemplaza a las funciones de color de Sass

Sass:

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

CSS nativo:

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

color-mix() tiene amplio soporte en los navegadores actuales y te permite derivar variantes más claras, más oscuras y mezcladas a partir de un único color base. No es un reemplazo directo uno a uno de darken() o lighten() —estas ajustan la luminosidad en el espacio HSL, mientras que color-mix() mezcla dos colores—, pero para la mayoría de los casos prácticos en un sistema de diseño, cubre el mismo terreno. Para una mayor paridad con los ajustes basados en HSL, puedes mezclar en el espacio de color hsl: color-mix(in hsl, var(--primary), black 10%).

4. @layer reemplaza las soluciones alternativas de especificidad

Los desarrolladores de Sass a menudo escriben estructuras de selectores intrincadas para gestionar la especificidad. @layer de CSS tiene ahora amplio soporte en los navegadores modernos y te da control explícito sobre el orden de la cascada sin trucos de especificidad:

@layer base, components, utilities;

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

Las utilidades siempre prevalecen sobre los estilos base, no por el peso del selector, sino por el orden de las capas. Esta es una solución más limpia que cualquier cosa que Sass pudiera ofrecer para la gestión de la cascada.

5. @property reemplaza las soluciones alternativas de variables tipadas

@property está ahora soportada en los navegadores modernos actuales y te permite registrar custom properties con un tipo, un valor inicial y un comportamiento de herencia:

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

Esto permite animar custom properties y previene la herencia inesperada, algo que las custom properties de CSS planas no pueden hacer por sí solas. El soporte en los navegadores es más reciente que el de las otras funcionalidades de este artículo, así que verifica tus navegadores objetivo antes de depender en gran medida de ella en producción.

En qué sigue siendo mejor Sass

El CSS nativo no tiene equivalente para @each, @for, @if ni para la lógica compleja de @function. Si tu Sass genera clases utilitarias, construye escalas de espaciado de forma programática o contiene salida condicional, conserva Sass. También ten en cuenta que @import de Sass está obsoleto: utiliza en su lugar el sistema de módulos @use y @forward.

Conclusión

Para variables, anidamiento, manipulación de colores, control de cascada y propiedades tipadas, el CSS moderno es ahora suficiente para muchas tareas cotidianas de estilado. Audita para qué estás usando realmente Sass. Es posible que descubras que el paso de compilación está resolviendo menos problemas que antes. Sass sigue ganándose su lugar para la lógica programática, pero para las preocupaciones cotidianas de estilado, el CSS nativo ha cerrado la brecha.

Preguntas frecuentes

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..