PostCSS VS Sass

Aunque PostCSS tiene ya algunos años que fue desarrollado, su popularidad y su creciente auge se reduce a meses. Muchos podrían decir que es una herramienta hipster que no aporta mucha diferencia en cuanto a los preprosesadores conocidos (Sass, Less, Stylus) y que el hecho de aprender una nueva sintaxis o reconfigurar sus task runners o builders puede ser un fastidio para obtener el mismo beneficio.

Esa es la razón del post, comparar en un ambiente de desarrollo con el preprocesador que usaba más comunmente "Sass" con el tan nombrado PostCSS y todo lo fancy y hipster que envuelve según algunos.

Algo que debes de saber antes que nada por que el nombre de "PostCSS", a diferencia de un preprocesador, su nombre nace del siguiente paso de generar un .css , es decir, parsear hojas de estilo y modificarlas de la manera más conveniente para nosotros. Entonces puedes estar pensando ¿y para q carajos querría eso? ¿para q nos sirve?.

what?

Aquí va el ejemplo más común que quizá desconocías. Autoprefixer es uno de los plugins mas utilizado al desarrollar sus proyectos, ya que proporciona los prefijos necesarios para los viejos navegadores ayudándonos a escribir menos, y mantener un código más limpio en nuestro css inicial. Ok, este plugin tiene mas de 3 años que fue desarrollado y era usado comúnmente para recorrer la hoja de estilos generada por un preprocesador (tan lo menos yo lo hacia) y añadirle los benditos prefijos te odio internet explorer, sin saberlo, estábamos usando PostCSS para lograr esta tarea, autoprefixer es un plugin de PostCSS.

Por si solo PostCSS no tiene ninguna sintaxis definida ni ninguna función declarada, lo que hace poderoso y versátil a esta herramienta son los plugins. Existen cantidad de plugins para PostCSS que te dejará tomar la rienda de lo que necesitas en tu proyecto y sobre todo adecuarlo a lo que más te guste para desarrollar.

Por ejemplo:

Supongamos que sólo usas Sass porque te gusta el hecho de declarar variables en tu hoja de estilos, bien, pues para hacer sólo eso estás ejecutando una herramienta con miles de líneas y funciones, sin embargo con PostCSS puedes agregar un plugin que solo te sirva para declarar variables y listo. ¿En que te ayuda? la velocidad de "compilación" es mucho menor. Créeme... mucho.

Ahora bien supongamos que además del uso de variables también te gustaba nestear las cosas, a pues podemos incluir un plugin para ello también.

Todo lo que escribas en tus hojas de estilos dependerá totalmente de los plugins que escojas (o por qué no crear el tuyo).

Hice un pequeño ejemplo para mostrar en código a lo que me refiero, para ver el tiempo de ejecución nos ayudaremos de Gulp

Esta es la estructura de nuestro ejemplo, en la carpeta "source" encontraremos dos carpetas llamadas "css" y "sass", ambas contienen los mismos estilos del sitio, sólo que unos en sass y otros en css el cual pasaremos por PostCSS.

estructura

En lo particular, me encantó el plugin css-next el cual te permite hacer uso de las nuevas reglas de CSS aún no estandarizadas para todos los navegadores adaptándolas para ellos. En este ejemplo haremos uso de este plugin, así como de Partial Import para importar archivos parciales estilo sass en nuestra hoja de estilo.

Así se ven nuestros códigos comparados:

code

Este el setup de las tareas en Gulp para poder transformar el css, en ambas herramientas se genera también un sourcemap (css-next usa autoprefixer al momento de transformar, por lo que no es necesario declararlo como en la tarea de Sass).

gulpComp

Al transformar el css los tiempos fueron 986ms de PostCSS contra 2.86s de Sass, y al hacer una modificación dentro de esos archivos con PostCSS fueron 267ms vs 1.15s de sass.

times

Quizá la diferencia sea de milisegundos en este proyecto, pero mientras el proyecto crece, significa cada vez más tiempo.

El resultado final es prácticamente el mismo.

resultado

Conclusiones:

¿Quiénes lo usan? ¡¡Muchos!! FB, Twitter, Google, Wikipedia...
¿Debería cambiarme a PostCSS? Sí, sin duda.
¿Me llevará tiempo aprender y configurarlo? El necesario, no es una súper curva de aprendizaje no seas llorón.
¿Lo puedo usar con otra cosa que no sea Gulp? Sí, Grunt, Webpack, con un script de Node o Broccoli.
¿Sass morirá? No lo sé, quizá sea pronto decirlo, puede que haga algo y resurja de las cenizas, pero admítelo es como tomarte un "old fashion" en lugar de un "Lemon Charmp".

Les dejo la liga del mini proyecto, así como un útil starter pack para proyectos con PostCSS, Babel y Gulp.

Todas las dudas o comentarios son bien recibidos. ¡¡Saludos!!