¿Qué es un preprocesador de CSS?

Un preprocesador (de CSS) es una herramienta que nos permite escribir pseudocódigo CSS que luego será compilado y transcrito en código CSS. Este pseudocódigo está formado por variables, condiciones, bucles o funciones, elementos habituales de cualquier lenguaje de programación.

👉 Curso gratuito: Curso profesional de HTML y CSS.

El uso de un preprocesador es un proceso de dos pasos. Durante el primero de ellos se crean los estilos utilizando la sintaxis del preprocesador, mientras que en el segundo paso se compila el archivo en tiempo de ejecución para generar el código CSS definitivo.

El objetivo final de esta herramienta es el de disponer de un código más limpio para después poder utilizarlo en las páginas web que colocaremos en nuestros servidores, un código más sencillo de mantener y editar.

Beneficios de utilizar preprocesadores de CSS.

El uso de preprocesadores en nuestros proyectos aporta una serie de beneficios entre los que se pueden destacar:

• Añadir funcionalidades adicionales que no son posibles de utilizar en archivos CSS tradicionales, como el uso de variables y lógica condicional.
• Hojas de estilos más limpias, por consiguiente, más eficientes y fáciles de mantener.
• Posibilidad de reutilizar código, lo que se traduce en un ahorro de tiempo y esfuerzo.
• Ayuda a crear código compatible con todos los navegadores, lo que supone una gran ayuda para los diseñadores de sitios web.
• Se crea una capa de abstracción, donde no trabajaremos directamente sobre nuestro archivo CSS, ofreciendo una mayor seguridad.

Características de los preprocesadores.

Actualmente existen muchos preprocesadores. Cada uno de estos tiene características y elementos distintos, pero todos comparten los siguientes aspectos:

1.- Variables

Dentro de estas variables, podremos almacenar valores para utilizarlos posteriormente en cualquier parte del código, reduciendo así el tiempo y el trabajo invertido.

2.- Funciones

Como ocurre con cualquier lenguaje de programación, el uso de funciones permite evitar la escritura de código repetido. Esto mismo ocurre con los preprocesadores de CSS donde podemos crear una función que contenga una serie de características que se utilizan en varias partes de la hoja de estilos.

3.- Modularización del código

Otra de las grandes características de los procesadores es la posibilidad de importar archivos. En vez de utilizar un único CSS o tener varios en nuestro proyecto, lo que tendremos son varios archivos preprocesables que darán como resultado uno solo. Gracias a esta característica podremos tener organizado de una forma lógica y sencilla el proyecto en nuestro alojamiento web, teniendo distintos módulos para cada elemento del sitio.

Principales preprocesadores CSS.

Existen diversos preprocesadores en la actualidad, siendo los mas conocidos al dia de hoy los siguientes:

Less

Se trata del preprocesador más común y más fácil de utilizar. Fue creado en el año 2009 por Alexis Sellier y está escrito completamente utilizando el lenguaje JavaScript. Se caracteriza por contar con una sintaxis muy parecida a CSS regular, además de contar con una comunidad de usuarios muy grande y activa. Less es utilizado en proyectos como Twitter, Boostrap y Joomla 3.

Sass

Creado en el año 2007 por Hampton Carlin y está escrito mediante Ruby. Dentro de Sass nos encontramos con dos versiones de sintaxis diferente: .SCSS y .SASS. Cuenta con una gran comunidad tras su espalda y muchos recursos de aprendizaje web.

Stylus

Creado por Learn Boost en el año 2010. Está escrito en JavaScript y tiene las mayorías de características contenidas en Sass y Less, pero con una sintaxis más sencilla y flexible.

Conclusión.

Los preprocesadores de estilos son herramientas que nos permiten hacer mas sencillo y eficiente nuestro código CSS. No es mala idea aprender a utilizar alguno para llevar nuestras habilidades a un siguiente nivel, pero siempre conociendo las bases, es decir, conociendo la naturaleza de CSS puro.