CSS Map

diseno.jpg
Solucionex
09
Oct 15

Cuando trabajamos maquetando con lenguajes preprocesadores de CSS la tarea de hacer trazas es más compleja.

El fichero resultante de la compilación no mantiene ninguna correspondencia con nuestros ficheros fuentes LESS o SASS.

Es en ese momento donde entran en juego los CSS maps. Tal vez los hayas visto alguna vez y no hayas conocido su utilidad. Los ficheros css maps permiten conjugados con los navegadores más modernos realizar trazas o inspeccionar los estilos de los elementos del DOM llevándonos a los ficheros fuente correspondientes.

Dependiendo de la herramienta de compilación que estemos usando Grunt, Koala, CodeKit… la activación de la generación del mapa css variará.

En el caso de Koala bastará seleccionar la opción Source Map en el menú de compilación.

Configuración de CSS Maps en Koala

Una vez realizado esto, deberá aparecer en la ruta donde se compila nuestro fichero CSS, por ejemplo style.css un nuevo fichero con el mapa CSS, en este caso sería style.css.map

Si abrimos el fichero style.css veremos que al final del mismo se ha incluido una línea que indica la ruta a este fichero: /*# sourceMappingURL=style.css.map */

Ahora deberemos asegurarnos de que los mapas css están activos en el depurador del navegador. En nuestro caso utilizamos Chrome.

Abriremos el navegador y escribiremos la siguiente dirección que nos dará acceso a la configuración en el mismo: chrome://flags y activaremos la opción Enable CSS Source Maps.

En Safari este proceso de configuración no es necesario ya que lo detecta automáticamente. A partir de este momento cuando inspeccionemos un elemento del DOM la referencia a la hoja de estilo será a los fuentes en LESS o SASS.

Espero que os haya servido de ayuda.