Que es un preprocesador de CSS?

Cuando entrevisto 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é?

Agosto 29, 2014
Compartir en 

Este tipo de situaciones deja claro que hay cabida en el internet para una serie de artículos relacionados al 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 no ser así 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 cierta manera especial y estos serán interpretados para generar un archivo CSS totalmente válido.

¿Ok, y eso a mi para que $#$%@%* 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 existir 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 (aun que 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 u 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éntenme 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é a detalle sobre como podemos empezar a usar Sass en nuestros proyectos.