¿Qué son los preprocesadores de CSS?, ¿para qué nos sirven?, ¿cuáles debería aprender?, ¿por qué utilizarlos?

En nuestro día a día leemos y escribimos grandes cantidades de código, creamos sitios nuevos, experimentamos con algunas propiedades y hacemos uno que otro tutorial (guiño).

Si sigues el canal de devcode en Youtube, seguramente sabes que en varios de los videotutoriales que he elaborado hemos estado utilizando CSS puro; sin embargo, en esta oportunidad nos detendremos a explorar un tema más avanzado:  el uso de los preprocesadores de CSS.

Los archivos CSS o Cascading Stylesheets que tenemos en nuestros proyectos web nos ayudan a crear sitios web atractivos para nuestros clientes, pero por lo general un archivo CSS contiene muchas líneas de código, lo que demanda una inversión significativa de nuestro tiempo. Esto sumado a algunas limitaciones de CSS puede generar un trabajo menos productivo.

Por ello, existen los preprocesadores de CSS, los cuales extienden las funcionalidades de un CSS común, permitiéndonos tener variables, funciones, mixins, reutilizar código, tener más flexibilidad al momento del desarrollo, etc. 

Pero, ¿cómo es que funcionan los preprocesadores?

En términos simples, mediante un lenguaje de script escribimos código parecido al que usamos en CSS (esto dependerá del preprocesador que estemos usando), luego este código será compilado y como resultado de esta compilación tendremos un archivo CSS.

Hasta aquí puede que te preguntes, ¿si al final vamos a tener archivo CSS, por qué usar un preprocesador y no solo CSS?

No olvides lo que mencionamos antes lo de extender las funcionalidades de CSS. Tal vez no queda muy claro aún, pero continúa leyendo.

En la actualidad existen una serie de preprocesadores con sintaxis parecidas y algunas diferencias. Por mencionar algunos preprocesadores tenemos Sass, Less y Stylus, entre los más usados hoy en día y existe una amplia documentación, ejemplos y frameworks compatibles con ellos, por lo que aprender a usarlos no te será complicado, solo dependerá del tiempo que inviertas en leer y practicar.

¿Cuál aprender?, ¿Cuál es mejor?, ¿Aprendo los tres? No te cierres en aprender solo uno, explora las características de cada uno y quédate con el que se adecúe más a tus necesidades.

Ahora vamos a ver unos ejemplos de cómo sería la sintaxis usando los preprocesadores antes mencionados. Para este ejemplo vamos a usar a nuestra vieja confiable Codepen.io.

Codepen nos permite seleccionar el preprocesador que queremos utilizar, sin necesidad de instalar nada. Para poder seleccionar un preprocesador, iremos a Settings y luego en CSS, desplegamos las opciones en CSS preprocessor y seleccionamos el preprocesador que queremos usar.

Teniendo configurado lo anterior vamos a tener lo siguiente, un hecho con HTML y CSS, para este caso no usamos ningún preprocesador.

Aquí tendremos la misma versión del ejemplo solo que en Sass

Ahora esta sera la version en Less

Finalmente asi se veria en Stylus

Para cada preprocesador la manera de escribir el código ha variado un poco, pero el resultado sigue siendo el mismo.

Prueba y practica con los preprocesadores antes mencionados y elige el que más te guste. Puedes comentarnos cómo te fue o qué te pareció este tutorial en la caja de comentarios. No olvides que puedes registrarte de manera gratuita en la plataforma para recibir novedades, promociones y acceso a los cursos que tenemos en ella.