CSS anidado nativo, adiós a Sass

Sass llevaba tanto tiempo en mi flujo de trabajo que instalarlo era casi un reflejo al empezar cualquier proyecto, sin pararme a pensar si de verdad lo necesitaba. Con el anidamiento nativo ya soportado en todos los navegadores modernos, en los proyectos que he arrancado este año directamente no lo he vuelto a instalar.

Lo único que de verdad usaba de Sass

Si soy sincero, de todo lo que ofrece Sass — variables, mixins, funciones, bucles — lo único que usaba en el noventa por ciento de mis archivos era el anidamiento: poder escribir .card { .title { ... } } en vez de repetir .card .title { ... } como selector plano cada vez. Las variables las sustituí hace años por propiedades personalizadas de CSS (--color-brand), que además tienen la ventaja de poder cambiar en tiempo real según el contexto, algo que una variable de Sass nunca pudo hacer porque desaparece al compilar.

Con el anidamiento ya nativo, la única pieza que me faltaba para prescindir de Sass del todo dejó de faltar.

Lo que gano al quitarlo

Un paso menos en el build. Sin Sass no hay que compilar nada — el navegador entiende el CSS anidado directamente, así que el archivo que escribo es literalmente el que se sirve. Eso significa una dependencia menos que mantener actualizada, un postcss.config de menos, y para depurar en las herramientas de desarrollador ya no hay ese salto entre el CSS generado y el fichero .scss original.

Lo que sí echo un poco de menos

Los bucles y las funciones para generar variaciones de una escala (por ejemplo, spacing-1 hasta spacing-10 a partir de una fórmula) sí los echo en falta de vez en cuando. Para eso sigo escribiendo esos valores a mano en las variables CSS, que en la práctica no son tantos como para que compense arrastrar todo un preprocesador solo por esa parte.

No voy a quitar Sass de proyectos antiguos que ya lo tienen bien integrado — no tiene sentido migrar solo por moda. Pero en todo lo nuevo, el CSS nativo ya hace lo que necesito sin pedirme instalar nada de más.