Acompáñanos en este tutorial donde aprenderemos qué es y cómo usar PostCSS de una manera rápida y práctica.

PostCSS, como se describe en su página oficial, es “una herramienta para transformar CSS con plugins de Javascript”. En este artículo explicaremos más profundamente de qué se trata cómo podemos usar PostCSS en nuestros proyectos.

Tal como mencionamos antes, PostCSS es una herramienta que por sí sola no realiza una acción, pues es hasta que utilizamos los plugins que verdaderamente podemos ver la magia de PostCSS. Las estadísticas de npm (node package manager) muestran que del 2015 a la actualidad, PostCSS ya cuenta con más de 25.884,079 descargas

Anteriormente mencionamos que PostCSS necesita de sus plugins para brillar y podemos encontrar un amplio catálogo de estos plugins tanto en su página oficial como los desarrollados por la comunidad en GitHub. ¡Esto es lo mejor de todo! Nosotros mismos podemos llegar a desarrollar nuestros propios plugins para realizar tareas muy específicas de acuerdo a nuestra necesidad.

Cabe mencionar que cada plugin en PostCSS realiza una tarea particular, lo que suena un poco engorroso al tener que ir descargando varios plugins uno por uno. Pensando en solucionar este problema es que existen los paquetes de plugins que podemos instalar y están conformados por una variedad de plugins relacionados entre sí.

Por ejemplo si queremos usar sintaxis de Saas en nuestro CSS, tendremos que descargar el paquete de PreCSS que está formado por una serie de plugins que nos permitirán usar una sintaxis familiar a la de Saas con variables, mixins, condicionales, etc.

Antes de seguir avanzando debemos aclarar que PostCSS no es un preprocesador ni un postprocesador, aunque utilizando los plugins correctos funcionaría como tal si así lo queremos. Para cerrar esta parte, el prefijo Post se utiliza en PostCSS para referirse a “CSS y más allá”.

Un modo de probar PostCSS sin tener que instalar nada en el ordenador, es utilizándolo desde Codepen. Creamos un nuevo Pen y en la ventana de CSS vamos a dar click en el engranaje para acceder a la configuración y en la opcion “CSS Preprocessor” vamos a seleccionar PostCSS, luego damos clic en la opción de Need an add-on?  y agregamos el plugin de @use postcss-simple-vars; Después, guardamos los cambios y  empezamos a escribir los estilos.

El plugin de postcss-simple-vars nos permite crear variables, como lo hacemos en Saas. En el siguiente enlace podemos acceder a la documentación del plugin.Ahora veamos en un ejemplo cómo funciona.

Si queremos ver nuestro CSS final, damos clic en la esquina derecha para desplegar las opciones y seleccionar View Compiled CSS.

Y con esto terminamos este breve tutorial sobre PostCSS. Espero que haya sido de tu agrado y si fue así, no olvides compartirlo con tus amigos y en tus redes sociales. Si tienes dudas u opiniones, déjala en los comentarios.