Introducción a los Preprocesadores CSS

Las hojas de estilos en cascadas (CSS) son la herramienta  que utilizamos para dar estilos a nuestras estructuras web, sabemos el poder y alcance que tenemos cuando utilizamos esta tecnología, y mas ahora que podemos hacer cosas realmente sorprendentes utilizando css3, pero pasar de lo realmente fácil a lo tedioso y aburridor solo hace falta un paso, no se si has tenido que actualizar estilos a un portal web o a una pagina grande en contenido, cambiar colores, botones, tipografías.. teníamos que buscar los estilos que se estaban aplicando al elemento y buscarlo en la gran hoja css, también al momento de escribir añorábamos una forma mas eficiente para hacer esta tarea. Ahí veíamos que faltaba algo para hacer esto mas automático y fácil.

Los Preprocesadores CSS fueron creados para llenar este vacío y hacer de que la escritura de este lenguaje sea mas eficiente y clara simplificándonos el código.

Un Preprocesador de CSS es básicamente un lenguaje de scripting que nos permite extender el CSS con una nueva sintaxis y que luego compila el script en un css regular después de correr atreves del procesador. Esto significa esencialmente que el uso de un pre-procesador es un proceso de dos pasos.

En primer lugar, creamos los estilos utilizando la sintaxis Preprocesador. A continuación, se compila el archivo en tiempo de ejecución para generar el CSS final, que luego se utiliza por el sitio.

Ejemplo:

preprocesadores-css1

Hay múltiples formas para hacer estas tareas, y la mayoría son conducidos por el pre-procesador que elijamos y que el flujo de trabajo que se ajuste a nuestras preferencias.

Beneficios al utilizar un Preprocesador

Cuando utilizamos pre-procesadores obtenemos muchos beneficios.

 

  • Podemos añadir funcionalidades adicionales que no está integrada en CSS, como variables y lógica condicional.
  • También hacen que el código sea más eficiente, ya que escribiremos menos y tendremos una hoja mas limpia.
  • Vamos a reutilizar mucho código, esto nos ahorra mucho tiempo y trabajo.
  • Los cambios serán mucho mas rápidos vamos a hacerlos con solo cambiar el valor de alguna variable.
  • Y ayudan a lidiar con inconsistencias de navegación mediante la generación de CSS que está formateado para trabajar en todos los navegadores.

 

Principales Preprocesadores CSS

Aunque hay muchos pre-procesadores disponibles, solo tres son los que se han convertido en los más populares e importantes.

Less

lessLess es el preprocesador más común y mas facil de utilizar, creado en 2009 por Alexis Sellier, esta escrito en JavaScript, y tiene la sintaxis que se asemeja más a CSS regular ademas la comunidad de usuario es muy grande y activa, cuenta con mucho material de aprendizaje. Es utilizado por (Twitter Boostrap y base de Joomla 3).

Sass

sass
Este es el segundo preprocesador mas utilizado, creado en 2007  por Hampton Catlin está escrito y corre bajo Ruby, y tiene dos versiones de sintaxis para elegir .SCSS y .SASS Cuenta con una gran comunidad muy activa y múltiples recursos de aprendizaje en la web.

Stylus 

stylus
Creado en 2010 por LearnBoost está escrito en JavaScript y  tiene la mayoría de las características contenidas en Sass y Less, pero con una sintaxis más despojada. Es menos extendido que los anteriores y su sintaxis es la mas flexible de todas

Cada uno de estos pre-procesadores tiene una comunidad de desarrolladores que han creado las extensiones, módulos y herramientas de flujo de trabajo en torno a cada una de las versiones para hacerlas cada vez mas potente y cada vez mas funcional.

Conclusion:

Utilizar Preprocesadores CSS para nuestros proyectos creo que es la mejor opción hoy en día, son mas las ventajas que hay que desventajas, lo que tenemos que hacer es aprender alguno, yo utilizo Less y dentro de poco publicaré un curso totalmente gratuito para aprender a usar este Preprocesador.

¡Nos vemos!

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo