LESS vs Sass vs Stylus

por Natalia Ventre el 30/05/2013 ・ podés leerlo en 6 minutos ・

El primer preprocesador que usé fue LESS. Lo elegí porque la documentación tiene ejemplos fáciles de entender y rápidamente las ventajas de los pre-procesadores de CSS me convencieron de que son una potente herramienta de desarrollo front-end. Empecé a investigar sobre la sintaxis de Less, Sass y Stylus. Usé Stylus en un proyecto web y luego Sass. ¿Cuál es mejor?

Características de LESS

  • LESS es un pre-procesador que se mantiene fiel a la naturaleza declarativa de CSS. Te da algunas herramientas para que el CSS te resulte más fácil de mantener, pero no intenta ser un lenguaje de programación1.
  • La documentación es concisa y los ejemplos muy claros.
  • Podés aprender e inclusive dominar LESS en muy poco tiempo. No tiene mucho misterio, leyendo la documentación alcanza y sobra.
  • Aunque no es recomendable para producción, podés empezar a usarlo en segundos simplemente linkeando un JavaScript, sin necesidad de instalar absolutamente nada.
  • Framework front-end: Bootsrap. Bootstrap es un framework front-end popular y aunque no tenés que saber LESS para usar Bootstrap, sirve como ejemplo de lo que podés lograr con LESS.

Motivos para NO elegir LESS

Si sabés CSS, y querés mejorar tu flujo de trabajo sin hacer cambios radicales, es una opción viable. Generalmente se recomienda LESS para principiantes y para diseñadores, pero no vas a ser un principiante para siempre y que alguien sea diseñador, no significa que es incapaz de entender conceptos sencillos de programación.

Uno de los grandes problemas de LESS es que desarrollás más rápido con los mixins a expensas del rendimiento. Cada vez que usás un mixin, LESS repite bloques de código en el CSS generado. Sass con la directiva @extend agrupa los selectores que necesitan el mismo código y genera un CSS optimizado2. En una futura versión, LESS va a extender mixins. Otros pedidos ya decidieron que no los necesitan y otros aún los están discutiendo3. Viendo la lista de feature requests de LESS en GitHub, se nota un interés de los usuarios por equiparar a LESS en cuanto a funcionalidades con los otros pre-procesadores.

Características de Stylus

  • La documentación es completa y con ejemplos claros, pero no tan prácticos como los de LESS.
  • Podés probar Stylus online.
  • Los mixins transparentes te permiten re-definir propiedades. Es un pre-procesador para hackers.
  • CSS Authoring Framework: Nib es una pequeña librería con mixins CSS3 cross-browser, etc.
  • Framework front-end: Jeet Framework es un framework inspirado en el sistema de grilla Semantic.gs, que usa un pre-procesador de CSS para evitar incluir clases presentacionales en el HTML. Conceptualmente es lo opuesto a Bootstrap.

Motivos para NO elegir Stylus

Lamentablemente además de la documentación no hay prácticamente tutoriales o artículos detallando casos de uso. A Stylus le falta un campeón, una persona importante en la industria que escriba sobre sus beneficios y le de impulso. Con LESS y Sass maduros, Stylus llegó tarde al juego y no despegó.

Características de Sass

  • La referencia del lenguaje es extensa.
  • Podés probar Sass online
  • Para aprender Sass, hay un curso en Code School Assembling Sass con videos y ejercicios para practicar el código en el navegador.
  • CSS Authoring Framework: Compass incluye patrones re-utilizables, mixins CSS3 cross-browser y facilita la creación de sprites. Bourbon es una librería de mixins para Sass.
  • Frameworks front-end: Foundation.

Motivos para elegir Sass

Sass es, sin lugar a dudas, más complejo que LESS, pero tiene la comunidad que le falta a Stylus. Hay cursos en CodeSchool y artículos publicados en CSS-Tricks, The Sass Way y otros blogs para aprender Sass y mantenerse al día.

En abril del 2013, Chris Eppstein anunció que va a empezar a trabajar en LinkedIn donde una de sus tareas va a ser mejorar Sass y Compass. Este es otro motivo para elegir Sass, porque hasta ahora todos estos proyectos eran mantenidos en el tiempo libre de sus creadores y tener el apoyo económico de una empresa es importante para que pueda seguir creciendo.

En mayo del 2013, se descubrió que Apple usa Sass en la Apple Store a raíz de unos comentarios con información de debug dejados en el código de producción.

En Sass podés pasar bloques de contenido a mixins por ej. para trabajar con animaciones basadas en keyframes y media queries. Sass ahora soporta nombres de clases al estilo BEM. Sass soluciona problemas reales de desarrollo CSS. Hay una serie de características como las variables y mixins que son útiles y las tienen todos los pre-procesadores de CSS, pero Sass es el único que escucha a quienes escriben CSS y les hace la vida más fácil.

Conclusiones

Buscando cómo usar variables en CSS, llegué al sitio web de Sass, un sitio poco atractivo y confuso4, y ¡pasaron varios años hasta que me decidí a probarlo! Escuché en alguna oportunidad que Sass es genial porque tiene Compass, un framework que a primera vista tampoco se entiende para qué sirve… Con el RWD (diseño web adaptable) los pre-procesadores de CSS volvieron a estar sobre la mesa. El catalizador para pasarme a Sass fue el curso Assembling Sass, en un par de horas entendí el uso correcto de los mixins5 y las directivas y cómo sacarle jugo.

Escribí este artículo porque no es fácil elegir cuál pre-procesador de CSS usar, usé los tres, y aunque Sass a primera vista es el menos atractivo, es el que terminé eligiendo y cada vez que actualicé este artículo fue con buenas noticias sobre Sass. En ningún momento se me pasó por la cabeza volver atrás, a escribir CSS vainilla o a usar otro pre-procesador.


  1. Que Sass y Stylus tengan características de lenguaje de programación, no quiere decir que tengas que usarlas. Están ahí para cuando las necesites, no para complicar innecesariamente el CSS.

  2. En CSS podés separar con coma varios selectores para darles el mismo estilo. Tanto con CSS vainilla o con Sass tenés que tener la capacidad para encontrar patrones que se repiten, pero con Sass el código de autor es más sencillo de editar porque todos los estilos de un componente quedan juntos.

  3. En Less vs Sass vs Stylus Luke Page comenta qué no se puede hacer en LESS que sí se puede en Sass y Stylus.

  4. Esa mujer hablando por teléfono, ¿quién es? ¿la secretaria de Don Drapper?

  5. Como empecé con LESS y para LESS todo es un mixin, al pasarme a Sass tuve que aprender la diferencia entre @include y @extend, entre los mixins y los placeholder selectors, etc.