Preprocesadores Sass y LESS

Los desarrolladores web deben estar familiarizados con uno o ambos preprocesadores

¿Coke o Pepsi, Mac o PC, Marvel o DC? En cada comunidad, hay un debate sobre cuál es mejor. Para los diseñadores o desarrolladores web, ese debate es Sass o Less.

¿Qué son Sass y LESS?

Las hojas de estilo sintácticamente impresionantes (Sass) y Leaner CSS (LESS) son preprocesadores de CSS. Son extensiones de hojas de estilo especiales que hacen que el diseño sea más fácil y más eficiente. Tanto Sass como LESS compilan en hojas de estilo CSS para que los navegadores puedan leerlas, lo cual es un paso necesario porque los navegadores modernos no pueden leer tipos de archivos .sass o .less.

Si planea estar en el mundo del desarrollo web, es una buena idea estar bien versado en uno de los dos preprocesadores, o en ambos .

Cuando se trata de eso, ambos son similares. Hacen que escribir CSS sea más simple, más orientado a objetos y una experiencia más agradable. Sin embargo, hay algunas diferencias clave. Cinco de ellos se enumeran aquí.

  • 01 Sass está en Ruby. MENOS está en JavaScript

    Sass está basado en Ruby, y requiere una instalación de Ruby. Esto no es gran cosa si tienes una Mac. Sin embargo, es una instalación más larga si tiene una máquina con Windows.

    LESS se construyó en Ruby como Sass, pero se ha migrado a JavaScript. Para usar LESS, cargue los archivos JavaScript aplicables en su servidor o compile las hojas CSS a través de un compilador fuera de línea.

  • 02 Asignar variables: Sass usa $; MENOS Usos @

    Tanto Sass como LESS usan caracteres especializados para asignar variables. De esta forma, no tiene que seguir ingresando especificaciones; solo puedes ingresar al personaje.

    En Sass, es el signo de dólar ($). En LESS, es el símbolo at (@). El único inconveniente para LESS es que hay unos pocos selectores CSS existentes que ya usan @, por lo que puede endurecer un poco la curva de aprendizaje.

  • 03 Sass tiene brújula, MENOS tiene prearranque

    Sass y LESS tienen extensiones disponibles para integrar mixins (la capacidad de almacenar y compartir declaraciones de CSS a lo largo de un sitio).

    • Sass tiene Compass disponible para mixins, que incluye todas las opciones disponibles con actualizaciones para soporte futuro.

    • MENOS tiene Preboot.less, MENOS Mixins, LESS Elements, gs y Frameless. El soporte de software de LESS está más fragmentado que Sass, lo que resulta en una gran cantidad de opciones diferentes para extensiones que pueden no funcionar todas de la misma manera. Para su proyecto, puede necesitar todas las extensiones enumeradas para obtener un rendimiento similar al de Compass.

  • 04 MENOS tiene mejores mensajes de error que Sass

    Tanto Sass como LESS han sido probados por su capacidad de informar errores en la sintaxis. MENOS tiene mensajes de error más precisos en las pruebas, ya que informó la ubicación correcta del error.

    Algo como esto podría ahorrar un poco de tiempo sudando por un error tipográfico.

  • 05 MENOS tiene más documentación fácil de usar que Sass

    La documentación LESS es visualmente atractiva y más fácil de seguir para los usuarios principiantes. La documentación de Sass tiene mucho más de una base de conocimiento o configuración de wiki.

    Este es un hecho que podría ser importante para las tasas de adopción de Sass o LESS, ya que es una plataforma diseñada para su uso en el diseño de sitios web.