LESS contra SASS – Qué preprocesador CSS usar

Hay una cantidad absurda de preprocesadores CSS: LESS / SASS / Stylus / Swith CSS, por nombrar algunos. Estos preprocesadores fueron creados para de cierta manera dinamizar la construccion de los archivos css que embellecen nuestros sitios web y ser un mas ordenado, modular y productivo en el momento del desarrollo web, pero la pregunta es… ¿Cual de todos estos ofrece un mejor trabajo?

Por cuestiones de tiempo solo compararé los mas populares de ellos: SASS y LESS. Para decidir esto, divido esto en varios factores.

Inicialización:

Comenzando por el paso mas fundamental, la instalacion, SASS y LESS estan costruidos en plataformas distintas, SASS esta construido en Ruby mientras que LESS es una librería JS.

SASS necesita Ruby instalado para poder funcionar, en Macs está preinstalado pero en Windows probablemente tengas que instalarlo para poder trabajar en SASS. Adicional a esto SASS debe ser instalado via comandos. Hay varias appliaciones con GUI pero no son nada gratis.

LESS esta construido sobre Javascript, asi que instalarlo es tan sencillo como linkear una libreria JS en tu documento HTML. Hay tambien varias soluciones con GUI para ayudarte a compilar tus LESS a CSS, la mayoria son gratis y trabajan muy muy bien.

SASS 0 – LESS 1

Extensiones:

Ambos tienen extensiones para hacer todavia mas sencillo el desarrollo web.

SASS tiene la particularidad que tiene una extensión muy poderosa: Compass, que no solo es una mezcla de componentes CSS3 compilados, sino que tiene varias funciones que cumplen varios frameworks actuales como Helpers, un layout limpio, tipografias, una estructura de grillas y hasta imagenes en Sprite.

LESS esta integrado en una cantidad absurda de extensiones, tales como Frameless, Semantic, Even.less y el popular Twitter Bootstrap.

Ambos son increíbles pero aqui le doy el punto a LESS por estar integrado en Bootstrap (para mi la mejor front-end framework que existe).

SASS 0 – LESS 2

Lenguaje:

Cada uno tiene su propio lenguaje. Ambos tienen variables en si, pero no hay mucha diferencia excepto que SASS declara variables con $ y LESS con @. Ambos ordenan y segmentan el codigo de igual manera, incluyendo alguna clase o elemento inmediatamente dentro de la clase o elemento padre.

Ejemplo: SASS / LESS

Comparación LESS – SASS

SASS 1 – LESS 3

Notificaciones de Error:

Estas notificaciones son super importantes al momento de compilar los archivos a css. Cuando ya tenemos cientos de lineas de codigo, una notificación justo en los errores es super esencial al momento de revisar el codigo.

SASS: Solo he visto en comandos los errores de SASS, él creara una notificacion si hay algun eror en el codigo.

Error en SASS

No es nada gráfica la notificación.

LESS: En el mismo escenario de error, Less es más gráfico al momento de mostrar el error ademas de ser más preciso:

Error en LESS

LESS es muchísimo mas gráfico en este aspecto.

SASS 1 – LESS 4

Documentación:

Naturalmente al momento de presentar la documentación para ayudarnos a desarrollar mas eficientemente, ambos preprocesadores ofrecen su propio estilo.

SASS: Si miran su documentación, sentiran que estan en una wiki invertida, muy semantica y ayuda muchisimo al usuario primerizo en este asunto:

http://sass-lang.com/documentation/file.SASS_REFERENCE.html

LESS: su documentación es mas a lo bootstrap con un affix, yendo mas al grano, pero nada amigable con el usuario primerizo.

http://lesscss.org/usage/

La documentación SASS se lleva el punto en este aspecto.

SASS 2 – LESS 4

Conclusión:

Claramente LESS actualmente es mas avanzado que SASS, sin embargo, no podria decir que SASS es malo, simplemente que LESS trabaja mucho mejor a mi humilde opinión.