Editando Sass y Less en vivo con las herramientas de desarrollo

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

Sass y Less son lenguajes expresivos que se compilan a CSS. Si estás usando Sass o Less para generar tu CSS, posiblemente quieras depurar el código que escribiste y no el CSS generado. Afortunadamente puedes hacer esto ahora con las herramientas de desarrollo de Firefox 29 (actualmente en el canal Aurora), usando los mapas de fuentes.

Este video muestra cómo funcionan los mapas de fuentes de CSS.

Las herramientas de desarrollo utilizan los mapas de fuentes para mostrar el número de línea de las reglas en los fuentes originales, y te permiten editarlos en el editor de estilos. Así es como se usa esta función:

1. Genera el mapa de fuentes

Cuando compiles el fuente a CSS, utiliza la opción para generar un mapa de fuentes para cada hoja de estilos. Para hacer esto necesitas Sass 3.3 (actualmente en versión preliminar, gem install sass --pre) o Less 1.5+.

Sass

sass index.scss:index.css --sourcemap

Less

lessc index.less index.css --source-map

Esto generará un archivo de mapa de fuentes .css.map para cada archivo CSS, y agregará un comentario al final de tu archivo CSS con su ubicación:

/*# sourceMappingURL=index.css.map */

Las herramientas de desarrollo utilizarán este mapa para vincular las líneas del CSS generado con los fuentes originales.

2. Habilita mapas de fuentes en las herramientas de desarrollo

Haz click derecho en cualquier parte de la vista de reglas del inspector o en el editor de estilos para ver un menú contextual. Selecciona la opción para ver los fuentes originales.

Ahora los vínculos de las reglas CSS mostrarán la ubicación en el archivo original, y hacer click en esos vínculos te llevará a los fuentes en el editor de estilos:

3. Vigila los cambios

Puedes editar los fuentes originales en el editor de estilos, pero para ver los cambios aplicados en la página, tienes que vigilar los cambios del fuente para regenerar el CSS cada vez que esto sucede. Para lograr esto:

Sass

sass index.scss:index.css --sourcemap --watch

Less

Con Less tendrás que usar un servicio adicional, como grunt.

4. Guarda el fuente original

Guarda el fuente original en tu sistema de archivos local utilizando el vínculo de Guardar:

Las herramientas infieren la ubicación del CSS generado y verán los cambios para aplicarlos a la página en vivo. Ahora, cuando edites un fuente original y lo guardes, el estilo de la página será actualizado y podrás ver de inmediato tus cambios en Sass o Less. ¡Recuerda que debes guardar el archivo para que los cambios apliquen!

Bio
Latest Posts

jorgev

Add-ons Developer Relations Lead at Mozilla

Jorge trabaja para el equipo de complementos de Mozilla, y se dedica a Mozilla Hispano y Mozilla Costa Rica en su tiempo libre. Actualmente está encargado del blog de Mozilla Hispano Labs.