"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Preprocesadores CSS

Como bien sabemos los estilos de una web son aportados en un lenguaje llamado CSS, este lo puedes declarar dentro de las propias etiquetas html con el atributo style, lo puedes poner en el head de la página entre etiquetas o declararlo en un archivo independiente que tendrá una extension .css.

Esto es lo básico, y además de saber donde escribir este código, según vuestro nivel como programadores conocereis mejor o peor su sintaxis, sabreis usar los nuevos atributos del último estandar CSS3, o «arreglar» vuestros estilos para que se vean en distintos navegadores…

Si has dominado todo eso, poco mas te queda que aprender de ese lenguaje, posiblemente en ese punto es cuando todos nos vamos de cabeza a aprender el uso de algun framework, pero antes de ello preguntate, ¿es esto todo lo que CSS me ofrece?

Pues la respuesta es NO, si quieres explotar todas las posibilidades de ese lenguaje lo mejor es que una vez que lo conozcas empices a usar Preprocesadores CSS.

Sin duda el termino puede resultar desconocido para muchos, pero es muy habitual que sean usados en grandes proyectos.

Los Preprocesadores CSS extienden las capacidades del lenguaje y además aumenta la rapidez en que desarrollamos el código. Hoy en dia existen 3 grandes preprocesadores que serían el LESS, SASS y STYLUS cada uno con sus ventajas e inconvenientes aunque todos con la misma filosofía.

 

¿Cúal usar?

De todos los preprocesadores CSS los dos que mas destacan en la actualidad son LESS y SASS.

Y si tuvieramos que compararlos para decidir cual es mejor sencillamente nos encontrariamos con un empate técnico, los dos son muy buenos, los dos hacen practicamente lo mismo y los dos tienen grandes comunidades que los apoyan y que nos dejan informacion para que la curva de aprendizaje no sea muy grande.

LESS es por ejemplo el lenguaje en el que esta escrito BootStrap, sin embargo a dia de hoy ya podemos descargar una version de BootStrap tambien en SASS, aunque no sea el tema de la entrada si quieres descargar BootStrap en alguno de estos formatos pulsa aqui.

SASS por otra parte es el lenguaje en el que esta escrito Liferay (un CMS de JAVA que usa Portlets como base y que ultimamente esta en auge), ademas tiene el apoyo de Google y es el único que hoy en dia soporta sourcemaps (Estos le indican al navegador dónde estan los archivos Sass originales utilizados para generar los archivos CSS).

Yo personalmente me he decantado por SASS asi que los tutoriales que iré escribiendo a continuación serán en este lenguaje, pero no importa mucho cual escojas, lo que importa es que uses uno.

 

Ventajas de los Preprocesadores CSS

 

Anidamiento de texto

La primera gran ventaja es el ANIDAMIENTO DE TEXTO, es decir guardar en el mismo bloque todos los estilos referentes a los elementos que descienden del codigo que definimos asi como los estados de ellos.

Leido así a lo mejor no se entendiende mucho, mejor lo vemos con un ejemplo, supongamos que tenemos una caja (un div) que tienes asociado como estilos una clase, esta clase es .cajaDeTexto, si este fuera el escenario yo ahora podria pasar a definir todos los estilos que podria tener los distintos elementos que estuvieran contenidos dentro de esa caja con un código SASS como este…

Como vemos dentro de la clase social estamos definiendo los estilos de 3 elementos como son el h4,span y textarea y ademas dentro del elemento span tambien le asignamos estilos a su estado hover (el estado que se activa cuando el puntero pasa por encima del elemento al que pertencece), sin embargo de esta manera esta mucho mas ordenado.

El resultado tras procesar este texto SASS es el siguiente texto CSS:

Lo realmente útil de anidar el texto es que el código queda más limpio y estructurado, algo que agradeceremos sobretodo si tenemos un proyecto grande y muchas lineas de código.

Variables

Otra utilidad que proporcionan es que podemos USAR VARIABLES y con ello asociar a ellas cosas que vamos a repetir en los estilos hasta la saciedad como son el color primaria de nuestra página, las fuentes, etc…

Veamos un ejemplo de como las podemos usar, como siempre primero el código SASS…

Como vemos he definido una variable llamada colorBorde y le he asignado un color, esta contiene el color de los bordes que usaré en mi pagina (no tiene sentido que la use solo para un caso en concreto). De manera que cada vez que use bordes no tengo que acordarme del color hexadecimal que le asigne antes, solo de como se llama la variable.

Por otra parte asi tampoco puedo meter la pata y poner un color distinto pensado que era ese, por lo que nos aseguramos que el resultado general sea homogéneo.

El resultado aunque ya os lo imaginais es este (las variables claro está no se vuelcan al css cuando hacemos el procesado)…

Además podemos realizar operaciones sobre las variables, si yo creara esto $espacioNormal: 20px; y en el codigo escribiera una operacion sobre la variable, esta cambiaria su valor en funcion del resultado, por ejemplo:

Resultaria en lo siguiente cuando lo procesaramos a CSS:

Como se aprecia el valor de partida de la variable que eran 20px fue modificado en este caso por una multiplicacion por 4 y ahora vale 80px al ser volcado…

Mixins y Funciones

Otra de las ventajas mas destacables de los Preprocesadores CSS es el poder usar MIXINS y FUNCIONES, este tema da tanto de sí que he escrito un post explicando que son y para que valen, puedes consultarlo aquí.

Los Mixins y las funciones son básicos para la reutilización de estilos, y para dotar de cierta modularidad a nuestro código.

Por todas estas características y otras muchas recomiendo que empieces a usarlos, o al menos que los pruebes para que decidas si merecen la pena o no.

 

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)