Preprocesadores de CSS

1996 año de hitos tecnológicos; en Japón sale a la venta el primer videojuego de Pókemon y la WC3 (que rige los estándares de la web tal como la conocemos) eleva a recomendación el uso de la especificación de CSS (Cascading Style Sheet) nivel 1.

 

Si bien el primero ha tenido innumerables secuelas, el segundo ha llegado a tener solo 3 versiones… del estándar, porque lo que bien es conocido es la facilidad de los desarrolladores de navegadores para inventar nuevas propiedades o funciones.

 

Pero lo que no encontrarás en ninguna de estas versiones es la posibilidad de crear constantes, bucles, condicionales, operadores… como sí tienen los lenguajes de programación … y esto hace que la dificultad del trabajo de los maquetadores haya crecido versión tras versión.

 

Hasta que alguien pensó… “¡Oye! ¿Y si creamos un lenguaje con muchas funcionalidades de los lenguajes de programación que permita crear CSS que los navegadores entiendan?” ¡Bingo! Y es cuando empiezan a crearse los preprocesadores de CSS.

 

Un preprocesador de CSS se puede definir como: un lenguaje que permite extender las funcionalidades estándar de CSS y que es capaz de compilar en propiedades o funciones estándar de CSS que los navegadores entienden. Los dos más usados actualmente son SASS (2007, http://sass-lang.com/) y LESS (2009, http://lesscss.org/).

 

Pero hasta aquí la historia, ahora dos pequeños ejemplos de cosas sencillas que hacen la vida de los maquetadores más fácil:

 

Estos códigos no podrían ser interpretados por un navegador, pero después del compilado lucirán así:

 

Otro ejemplo, donde vamos a crear funciones, usar constantes, operadores y la notación jerárquica de reglas:

 

Cuyo resultado post-procesado sería:

 

Hasta aquí la introducción básica de qué es un preprocesador de CSS y para qué puede servir. En siguientes entradas entraremos al detalle de que puede hacer por nosotros SASS y LESS.

 

You may also like

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies