CSS es muy simplista, accesible y esencial para quienes hacen diseños web pero también es bastante limitado.
El problema con CSS es que cuando el proyecto empieza a hacerse más complejo es cuando saltan a la luz las limitaciones que este lenguaje presenta respecto de las necesidades de desarrollo cada vez más sofisticadas - para las cuales no fue pensado -. Si bien se fueron haciendo cambios en los features de CSS con nuevas versiones y propiedades, todavía le falta mucho para poder satisfacer los requerimientos actuales del diseño web. Esto lleva a que las hojas de estilo se hagan cada vez más repetitivas y difíciles de mantener.
Para cubrir estas necesidades aparecieron los pre-procesadores de CSS que posibilitan el desarrollo de código más ordenado, optimizado y de fácil mantenimiento.
Estos pre-procesadores no ocupan el lugar de CSS sino que ayudan en el ahorro de tiempo de desarrollo, en la creación de documentos más prolijos y en facilitar el uso de características avanzadas de estilos.
Dos de los pre-procesadores más conocidos y utilizados son LESS (Less CSS) y SASS (Syntactically Awesome Stylesheets), cuyas características comunes son:
- permiten una mejor organización del código
- ofrecen el uso de variables
- implementan el uso de mixins
- permiten reutilizar código
- tienen funciones nativas para llevar a cabo funciones de uso común
- dan la posibilidad de ocultar comentarios
- permiten incluir archivos
- habilitan el uso de namespaces
Algunas de las virtudes que resaltan quienes prefieren Less
Extensiones
Si bien Sass cuenta con una librería (Compass) conteniendo muchísimas extensiones, Less también puede usar diversas extensiones que, a diferencia de Compass que agrupa todas en un único repositorio, están dispersas y construídas por distintos desarrolladores.Algunas extensiones disponibles para Less:
- CSS Mixins: LESS Elements, Preboot, LESS Mixins.
- Grid: 960.gs, Frameless, Semantic.gs
- Layout: Even.less
- Varios: Twitter Bootstrap
Por su simplicidad Less es ideal para quienes ya saben de CSS pero necesitan ponerse rápidamente prácticos en el uso de un pre-procesador que les ayude en sus tareas. La curva de aprendizaje puede ser un poco menos pronunciada con Less que con Sass, aunque en este punto están muy parejos.
Para algunos el sitio oficial de Less es más fácil de usar y es más vistoso que el de Sass, aunque este último ha mejorado mucho la estética y usabilidad de su sitio.
Puntos que resaltan quienes prefieren Sass
Anidamiento
Tanto Less como Sass permiten anidamiento, lo que es útil para evitar escribir selectores repetidamente. Pero Sass va un poco más allá permitiendo también el anidamiento de propiedades individuales.Mixins y herencia de selectores
Ambos pre-procesadores ofrecen el uso de "mixins" y sólo difieren en la manera de definirlos (en Less con la directiva "@" y en Sass con class selector).Los mixins en ambos casos se usan para incluir propiedades de un conjunto de reglas en otro. Pero Sass agrega la capacidad de herencia de selectores.
La herencia permite a los selectores heredar las propiedades de otros selectores, Sass soporta esta capacidad naturalmente mientras Less no puede hacerlo.
Documentación
En el sitio de Sass la documentación es mucha, muy comprensible y extensa. La presentación de información es muy sencilla, al estilo Wikipedia.Por otro lado Less también ofrece buena documentación pero puede parecer más simple y directa, con mucho uso de ejemplos. En cuanto a la documentación puede parecer un poco más atractiva en cuanto a su presentación.
Consideraciones en general
Mas allá de que estas tecnologías nos ofrecen ciertas ventajas a la hora de desarrollar, por otro lado, la organización de nuestros estilos es tan o más importante que las ventajas en sí. Al final del día, que nuestro css logre ser mantenido y comprendido por todos los integrantes de nuestro equipo también es un objetivo a cumplir. Particularmente, nos estamos sumergiendo en la implementación de una guía de estilosEl hecho de que Less haya sido elegido por Bootstrap hizo que muchos se inclinaran por este pre-procesador, pensando en el "aval" que esto le daba. Sin duda le ha dado más y mejor prensa.
Por su lado Sass tiene el soporte de Google que por supuesto representa también un respaldo importante.
Sobre Sass hay varios pre-conceptos que suponen cosas como que es necesario tener un manejo avanzado de Ruby o usar líneas de comando "truculentas" o cambiar radicalmente la forma de escribir las hojas de estilo. Nada de eso es cierto.
En general al recorrer la web se encuentra más coincidencia en que Sass es más robusto y cubre más necesidades que Less (o al menos de mejor forma).
Particularmente creo que el uso de uno u otro depende de las necesidades de cada desarrollo y las circunstancias en que tengamos que usarlo o la urgencia por empezar a aplicar un pre-procesador como estos.
Algunos de los puntos que es importante tener en cuenta a la hora de elegir:
- Evaluar el rendimiento de cada uno para servir a los distintos tipos de necesidades del proyecto
- Tener clara la guía de estilos y las necesidades del front end
- Evaluar la curva de aprendizaje
- Tener conocimientos previos de CSS
- Recurrir a la documentación ofrecida por ambos
Links donde encontrar más información
Sobre comparaciones ambos pre-procesadores estos dos links me parecieron muy interesantes:
Para quienes quieran empezar a ver Less:
- LESS CSS –Beginner’s Guide
- Working Effectively with LESS: Tips and Tools
- Consejos para comenzar el desarrollo web en Less (español)
Sobre Sass y Compass: Introducción a Saas y Compass (en español)
