Las hojas de estilos en cascada (CSS) son las herramientas que utilizamos para mejorar la apariencia de nuestro portal web, e incluso se pueden hacer cosas sorprendentes desde la llegada de CSS3. Usarlas no es complicado pero hay herramientas que nos permiten optimizar este trabajo, como los preprocesadores de CSS de los que hablaremos a lo largo de este White Paper.

Descargar White Paper: ‘Preprocesadores CSS, una forma diferente de crear nuestras hojas de estilos’

 

¿Qué es un preprocesador de CSS?

Un preprocesador de CSS se puede definir como una herramienta que nos permite escribir pseudocódigo CSS que luego será compilado de convertir en CSS tal y como lo conocemos de forma habitual. Este pseudocódigo está formado por variables, condiciones, bucles o funciones, elementos habituales de cualquier lenguaje de programación. Por este motivo, podríamos decir que tenemos un lenguaje de programación cuya misión es la de generar el código CSS.

Podemos afirmar que el uso de un preprocesador es un proceso de dos pasos. Durante el primero de ellos se crearían los estilos utilizando la sintaxis preprocesador, mientras que en el segundo paso se compilaría el archivo en tiempo de ejecución para generar el CSS definitivo.

El objetivo final de los procesadores de CSS es el de disponer de un código más limpio que luego poder utilizar en las páginas webs que colocaremos en nuestros servidores, un código más sencillo de mantener y editar.

 

Principales beneficios de utilizar preprocesadores de CSS

El uso de preprocesadores en nuestros proyectos aporta una serie de beneficios entre los que podemos destacar.

• Posibilidad de añadir funcionalidades adicionales que no son posible de utilizar en archivos CSS tradicionales, como son el uso de variables y lógica condicional
• Dispondremos de una hoja de estilos más limpia, consiguiendo a la vez que sea más eficiente y fácil de mantener
• Ofrece la posibilidad de reutilizar mucho código, lo que se traduce en un ahorro de tiempo y trabajo
• Los cambios serán mucho más rápidos, ya que únicamente deberemos cambiar el valor de alguna variable
• 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
• Posibilidad de separación absoluta del proceso de desarrollo y producción

 

Características de los preprocesadores

Actualmente existen muchos preprocesadores. Las características principales y más importantes son comunes a todos:

1.- Variables 

Una de las principales características de los preprocesadores es que permiten el uso de variables. Dentro de estas variables, podremos almacenar valores que luego reutilizar en cualquier parte del código. Gracias a esta reutilización ahorraremos mucho trabajo cuando tengamos que modificar un valor que se repite a lo largo de nuestro código. Por ejemplo, podríamos tener declaradas las siguientes variables:

                   $color_principal: #fff;

                   $color_secundario: #2BA47D;

                   $tamano_texto: 30px;

 

                   body {

                        color: $color_principal;

                        background: $color_secundario;

                        font-size: $tamano_texto;

                   }

 

Como vemos, luego esas variables pueden ser utilizadas dentro de bloques de estilos. El código anterior una vez compilado daría como resultado lo siguiente:

                body {

                      color: #fff;

                      background: #2BA47D;

                      font-size: 30px;

                }

 

2.- Funciones, mixins y prefixing 

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.

Un ejemplo de esto que estamos diciendo sería el siguiente:

mixin box-sizing(valor) { 

    -webkit-box-sizing: valor;

    -moz-box-sizing: valor;

    box-sizing: valor;

}

Ahora, si debemos utilizar de nuevo esta serie de propiedades, lo que deberíamos hacer sería la llamada a esa función, tal y como se muestra en el siguiente ejemplo:

 

div { 

    box-sizing(border-box);

}

 

El código anterior sería lo mismo que escribir en CSS tradicional lo siguiente:

 

div { 

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}

 

Aunque pueda parecer cosa de poco, en un proyecto con un elevado número de líneas de código puede significar el ahorro de muchas de ellas.

 

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 de la web.

Por poner un ejemplo, podemos tener un archivo que se encargue de los estilos de la parte pública, otro de la intranet de los usuarios y un último que sea el que contenga todas las instrucciones para dar estilos a la administración del sitio.

Gracias a esta organización podremos hacer los cambios de forma más rápida, ya que tendríamos que buscarlo en el archivo correspondiente, en vez de tener que localizarlo en el interior de un gran archivo.

 

Principales preprocesadores CSS

Aunque en la actualidad nos podemos encontrar muchos preprocesadores, hay algunos de ellos que destacan sobre el resto.  A continuación hablaremos de los más populares.

 

1.- 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. Una de sus ventajas es que tiene una curva de aprendizaje muy rápida, gracias sobre todo a la gran cantidad de material que nos podemos encontrar. Less es utilizado en algunos proyectos como Twitter, Boostrap y Joomla 3.

 

2.- Sass 

Se trata de otro de los preprocesadores más utilizados hoy en día. Fue 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.

 

3.- Stylus 

Este preprocesador fue 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. Stylus es el menos utilizado de los tres.

 

A lo largo de este documento hemos hablado de lo que son los preprocesadores y de sus principales características, y cómo su uso puede facilitar el desarrollo de un proyecto web. Puede que al principio sea más complicado al tener que aprender a utilizarlo, pero cuando lo conozcáis os daréis cuenta cómo su uso nos agiliza el desarrollo de los proyectos.