Cuando entrevisto a candidatos para Front-End, siempre pregunto: ¿Qué preprocesador de CSS utilizas? Las palabras varían un poco, pero la respuesta es la misma: ¿Un qué?
Este tipo de situaciones deja claro que hay cabida en el internet para una serie de artículos relacionados con el tema de los preprocesadores de CSS.
Aprendiendo a caminar antes de correr
Antes de empezar a trabajar con un preprocesador, es necesario tener bases sólidas de CSS; de lo contrario, sería como intentar correr antes de saber caminar.
Hablar acerca de las bases de CSS no es parte de este artículo, pero si estás interesado en aprenderlas, un buen lugar para empezar es la página de Mozilla Developers.
Entonces, ¿qué es un preprocesador?
Básicamente, es un programa que acepta datos de cierto tipo y los procesa para que puedan ser interpretados por otro programa. Esto significa que un preprocesador de CSS nos permite escribir estilos de una manera especial, y estos serán interpretados para generar un archivo CSS totalmente válido.
¿Ok, y eso para qué $#$%@%* me sirve?
Qué bueno que preguntas :D; un preprocesador es tu mejor aliado a la hora de trabajar en un proyecto web, ya sea grande o pequeño. Si lo utilizamos bien, nos ayuda a tener nuestro proyecto mejor organizado, reducir el tiempo de desarrollo y hacerlo más mantenible a largo plazo.
¿Cuántos preprocesadores de CSS hay?
En la actualidad existen varios, pero en mi opinión, actualmente solo hay 3 que vale la pena considerar:
Sass
Sass es, sin duda, el más maduro y completo de los tres. Su comunidad es la más grande y mejor organizada, está bien documentado y cuenta ya con siete largos años de existencia en el mercado. Cabe mencionar que otra de las ventajas de Sass es Compass, un complemento que pone aún más poder en nuestras manos y del cual hablaré a su debido tiempo.
Por lo anterior y muchas cosas más, Sass se ha convertido en el rey del barrio en la comunidad web internacional. Sass es usado por compañías tales como Apple, Google, Yahoo, Microsoft y LinkedIn, entre otras.
Less
Less es el segundo preprocesador de CSS más popular en el mercado. Le hace honor a su nombre, porque es un poco más sencillo de aprender y tiene opciones más limitadas (especialmente los operadores lógicos), cuenta con 5 años en el mercado y su documentación también es excelente.
El mayor promotor de Less es, sin duda, Twitter, pues lo emplean para el muy conocido Bootstrap (aunque ya existe una versión con Sass :D).
Stylus
Stylus tiene más o menos el mismo tiempo de existir que Less; en diciembre próximo cumplirá 5 años. Su comunidad, si bien activa, no es muy grande ni organizada (comparada con Sass y Less) y no sabría dar una referencia de alguna compañía grande que lo use como herramienta principal (si alguien sabe de alguna, por favor, coméntemelo por Twitter.
En conclusión, Sass, Less y Stylus son muy capaces y cada uno trae diferentes cosas a la mesa. Yo personalmente uso Sass + Compass; las opciones que esta combinación ofrece, creo que son inigualables.
En el próximo artículo de esta serie, escribiré en detalle sobre cómo podemos empezar a usar Sass en nuestros proyectos.