[Última edición: 27/10/2018]
CSS es un lenguaje extremadamente útil pero limitado. No dispone de capacidades que serían muy interesantes, como el uso de variables o la posibilidad de hacer operaciones matemáticas básicas o reutilizar código con comodidad. Eso es así por una serie de decisiones que se tomaron en su creación. Para paliar esas limitaciones para los diseñadores y desarrolladores que lo deseen, existen los preprocesadores, programas que permiten escribir nuestras hojas de estilo usando las características que hemos comentado, y otras, en un lenguaje algo más complejo que CSS y que después ‘compilan’ o procesan esas hojas de estilo a CSS convencional que podemos servir al navegador. En ocasiones, junto con el preprocesador tenemos conjuntos de herramientas que nos facilitan el trabajo (se encargan, por ejemplo, de que su uso se vuelva transparente, compilando automáticamente cada vez que hacemos un cambio en el código).
Dos buenos documentos que defienden el uso de preprocesadores son Ten Reasons to Use a CSS Preprocessor in 2018 (mayo de 2018) y Why Sass (A List Apart, noviembre de 2013).
How to Choose the Right CSS Preprocessor (noviembre de 2012).
Probablemente, ahora mismo el preprocesador más popular sea Sass. Tenéis una introducción a su funcionamiento en Getting Started with Sass (Sitepoint, marzo de 2013).
De todas formas, existen otros preprocesadores, y todos presentan sus ventajas e inconvenientes:
- LESS. (Online LESS Compiler. WinLess. LESS Prefixer. Crunch. SimpLESS.)
- Stylus.
- RCSS.
- ROOLE.
- PostCSS.
- CSS-Crush.
Una buena herramienta para el trabajo con Sass, LESS y Stylus es Prepros, que además dispone de versiones para Windows, Mac OS X y Linux.
Y, finalmente, un artículo de enero de 2018 que nos tendría que hacer reflexionar: Do you really need a Preprocessor? Use CSS variables instead. Sin embargo primero tendremos que comprobar si las variables CSS ya se pueden utilizar en los diferentes navegadores.