Depurando Sass desde el navegador


sass_chromedevtools

Uno de los problemas que me he encontrado a la hora de trabajar con Sass es su depuración desde el navegador.

En Chrome, si queremos hacer algún cambio en la hoja de estilos utilizando las herramientas de desarrollo (Dev Tools), aparece el nombre y la línea del archivo .css compilado, en vez del archivo original del preprocesador (.scss).

Archivo generado con css

Por lo que cada modificación incluye: abrir el editor, buscar el archivo .scss, hacer los cambios y compilar para generar el nuevo archivo .css … y en el caso de detectar algo que sigue sin gustarnos, vuelta a empezar.

Pero existe una solución que acelera este proceso : los source maps de CSS.

Source maps de CSS

Son unos archivos en formato JSON que relacionan el archivo original con el compilado y al ser detectados por el navegador, nos muestran la línea del archivo .scss en vez del archivo .css generado.

Los source maps de CSS vienen activados de forma predeterminada en las últimas versiones de Chrome, por lo que lo ideal es trabajar siempre con la versión más actualizada, que en el momento de escribir este artículo (Diciembre 2013), es la 31.

Para comprobar su activación, haz “click” sobre el icono de la parte inferior derecha de las herramientas de desarrollo.

Activar Preferencias

Desde la sección General, comprueba que estén habilitados los source maps de CSS y activa también el que actualiza los CSS generados (Auto-reload generated CSS).

Preferencias Dev Tools

El último paso es escribir chrome://flags en la barra de direcciones y “Habilitar” la opción que dice: Habilitar experimentos en Herramientas para desarrolladores.

Habilitar experimentos

Si tienes una versión inferior a la 30 de Chrome, en este punto, tendrás que reiniciar el navegador.

Actualizar Sass a la versión 3.3

Para poder trabajar con los source maps, hay que generarlos y para eso es necesario contar con la versión de Sass 3.3, que actualmente es la oficial. Para ello abrimos la consola (Terminal) y escribimos:

gem install sass

Se descargará e instalará la versión 3.3 de Sass. Para asegurarnos que hemos actualizado la versión, escribiremos de nuevo en la consola:

sass -v

Nos tendría que aparecer algo así como : Sass 3.3.x (Maptastic Maple), con eso ya tendremos instalada la versión que necesitamos.

Ya estaríamos con todo listo para empezar a trabajar. Nos situamos con la consola en el directorio raíz del proyecto e iniciamos el proceso habitual para que Sass vigile los cambios, compile nuestros archivos .scss y los convierta a .css, pero añadiendo la opción del source map.

sass --watch --scss --sourcemap scss/estilos.scss:css/estilos.css

Se creará un archivo de mapa (.map) al mismo nivel que el archivo .css compilado. Este es el archivo que nos permitirá, a partir de ahora, ver el archivo original (.scss) desde las herramientas de desarrollo de Chrome.

Archivo original

De esta forma la depuración resulta realmente sencilla, ya que si hacemos click sobre el archivo .scss (estilos.scss, en el ejemplo) se nos abrirá directamente dentro las herramientas de desarrollo, pudiendo realizar los cambios que queramos. Y no solo eso, ya que si pulsamos Cmd+click en alguno de los nombres de las propiedades dentro de la selección, nos llevará directamente a la línea en el archivo Sass donde esa propiedad se declara.

Guardando el archivo original

La optimización no sería completa si estos cambios no los trasladamos a los archivos originales. Para eso Chrome dispone de una opción que nos permite guardar el archivo .scss, para que cada vez que guardemos los cambios también lo estemos haciendo en el original de la carpeta del proyecto.

Dentro de la pestaña Sources, localizamos el archivo .scss (estilos.scss en el ejemplo) y haciendo click con el botón de la derecha, elegimos la opción “Save As…”, guardando posteriormente el archivo en la carpeta del proyecto. A partir de ese momento, cada vez que hagamos Cmd/Ctrl + S, estaremos guardando los cambios directamente en el fichero original!!!

Guardar cambios scss

Firefox 29 (actualización Mayo 2014)

Con la llegada de Firefox 29, ya podemos utilizar también los sources maps de CSS en ese navegador. Su activación es más facil que en Chrome puesto que ya vienen habilitados.

Dentro del Inspector de las DevTools, en el apartado de las Reglas, tan solo hay que hacer click con el botón de la derecha sobre la regla que queramos depurar y elegir la opción: “Mostrar fuentes originales”, nos indicará cual es el archivo .scss de origen.

Haciendo click en el nombre del archivo de origen, nos llevará a la línea a la que pertenece esa regla en el Editor de estilos.

firefox_devtools

Si queremos como en Chrome, guardar los cambios en el archivo original, desde el mismo Editor de estilos tenemos una opción “Guardar” a la que la primera vez, habrá que informar de donde se encuentra nuestro archivo pero luego se podrá usar Cmd/Ctrl + S, como hacemos habitualmente en cualquier programa para guardar los sucesivos cambios.

firefox_editar_scss

Hasta aquí la primera parte, en un próximo artículo veremos como optimizar el flujo de trabajo con Grunt, añadiendo algunos plugins para acelerar el proceso.