Saltar al contenido

Opción de preprocesador Vue CLI CSS: dart-sass VS node-sass?

Solución:

Actualizar 17/09/2020:

Como esta respuesta recibe votos a favor todos los días, pensé que tal vez valía la pena profundizar en este tema.


Teniendo en cuenta el sitio web de sass-lang:

Dart Sass es la implementación principal de Sass, lo que significa que obtiene nuevas funciones antes que cualquier otra implementación. Es rápido, fácil de instalar y compila a JavaScript puro lo que facilita la integración en los flujos de trabajo de desarrollo web modernos.

Dart-Sass es rápido, pero no el Versión compilada de JS. Prácticamente cuando decimos Dart-Sass hay dos opciones:

  • Dart-Sass en Dart-VM
  • Dart-Sass en NPM, que es una versión compilada de JS pura

Compilé el archivo Bootstrap 4 Sass en CSS con Node-Sass, Dart-Sass y Dart-Sass (JS) y puede ver el siguiente resultado:

Comparación Node-Sass y Dart-Sass - fuente: https://itnext.io/the-css-preprocessor-dilemma-node-sass-or-dart-sass-32a0a096572?source=friends_link&sk=3c465b78a0e1bc98379afd818546fcf4

  • En este caso particular, dos segundos no es gran cosa; pero considere que Dart-Sass (JS) es nueve veces más lento que Dart-Sass (Dart VM) y tres veces más lento que node-sass.
  • Tenía un proyecto con +20 temas, me llevó 30 segundos con node-sass, pero intenté usar Dart-Sass (JS), ¡y me llevó un siglo!
  • Aunque Dart-Sass (Dart VM) es el más rápido, instalarlo o integrarlo es un poco complicado.
  • Y Node-Sass se considera obsoleto.

Escribí sobre esto aquí, puedes leer más sobre esto aquí.

node-sass puede ser más rápido que dart-sass, pero al momento de escribir este dart-sass es la única biblioteca que implementa el @use regla, que se recomienda encarecidamente sobre @import. Según el sitio web oficial de sass-lang:

Qué hay de malo en @import? los @import La regla tiene una serie de problemas graves:

  • @import hace que todas las variables, mixins y funciones sean accesibles globalmente. Esto hace que sea muy difícil para las personas (o herramientas) saber dónde se define algo.

  • Debido a que todo es global, las bibliotecas deben prefijar a todos sus miembros para evitar colisiones de nombres.

  • @extend Las reglas también son globales, lo que dificulta predecir qué reglas de estilo se extenderán.

  • Cada hoja de estilo se ejecuta y su CSS se emite cada vez que se @imported, lo que aumenta el tiempo de compilación y produce una salida inflada.

  • No había forma de definir miembros privados o selectores de marcadores de posición que fueran inaccesibles para las hojas de estilo posteriores.

El nuevo sistema de módulos y el @use regla abordar todos estos problemas.

Adicionalmente, @import se eliminará gradualmente durante los próximos años y, finalmente, se eliminará del idioma por completo.

Para mantenerse actualizado con las mejores prácticas en Sass, debe usar dart-sass (es decir, sass) por ahora.

24/01/2021

Como está escrito en el documento oficial de github de node-sass, node-sass es obsoleto.

Advertencia: LibSass y Node Sass están obsoleto. Si bien continuarán recibiendo versiones de mantenimiento de forma indefinida, no hay planes para agregar funciones adicionales o compatibilidad con nuevas funciones de CSS o Sass. Los proyectos que todavía lo usan deberían pasar a Dardo Sass.

Así que supongo que sería mejor elegir dart sass si planeas a largo plazo o para mantenerte actualizado.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *