LESS vs Sass vs Stylus


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

Comentarios

Entradas populares de este blog

Instalar Ruby on Rails en Ubuntu 13.04

Navigation Drawer (Cajón de Navegación) Android

Preguntas de una entrevista de trabajo para Ruby y Ruby on Rails