Share
Este es un tutorial completo para usar LESS con los DevTools de Chrome. Si ha usado Sass con los DevTools de Chrome, lo más probable es que ya esté familiarizado con los conceptos presentados aquí..
No hace mucho tiempo, Chrome DevTools agregó una serie de características similares a IDE (y continúa haciéndolo), una de las cuales es la capacidad de comprender la asignación entre un archivo compilado y su archivo fuente correspondiente. Esto es posible gracias a Source Maps..
Todo lo mencionado aquí está disponible en Chrome Canary..
Lo primero es lo primero, instale la última versión (1.5.1 en el momento de escribir este artículo) de LESS a través de NPM (Source Maps llegó en 1.5.0):
$ npm install -g less $ lessc -v lessc 1.5.1 (LESS Compiler) [JavaScript]
En este punto, puede ejecutar el compilador MENOS en su terminal usando el menos mando.
Crea un nuevo archivo LESS. Para propósitos de demostración, será breve y simple..
@color: # 4D926F; #header color: @color;
Para convertir el archivo LESS en un archivo CSS, es un caso simple de ejecución:
lessc header.less header.css
Ahora necesitamos un archivo de mapa de origen. Crearlo con el -mapa fuente bandera.
lessc --source-map = header.map header.less header.css
Al usar el código MENOR que se muestra arriba, la ejecución de este comando produce un archivo de mapa de origen con el siguiente contenido:
"version": 3, "file": "header.css", "sources": ["header.less"], "names": [], "mappings": "AAEQ; EACP, cAAA"
En un mundo sin En Mapas de origen, DevTools mostraría estilos que se originan en el CSS compilado. La numeración de líneas no sería útil debido a una discrepancia entre el CSS compilado y el CSS de origen. Con Los mapas de origen, al inspeccionar un nodo DOM en la página, DevTools mostrará automáticamente los estilos que se originan en el archivo de origen MENOS.
Viendo una página web que hace referencia a lo anteriormente mencionado. header.css Ahora es inspeccionable de una manera más significativa.
Mientras lo esté agarrando Mando (Controlar en Windows), haga clic en cualquier propiedad, valor o selector para saltar a la línea de código en el archivo de fuente MENOS correspondiente dentro del Fuentes panel.
Ver código LESS en DevTools es ciertamente útil, pero la integración de un flujo de trabajo de creación puede acelerar su ciclo de iteración. El siguiente paso es decirle a DevTools cómo los recursos en una página web se asignan a los archivos en un sistema de archivos. Entrar: espacios de trabajo.
Nota: los espacios de trabajo son adecuados para muchos proyectos, no solo para aquellos que usan preprocesadores CSS.
Es posible que ya esté familiarizado con el Fuentes Panel desde una perspectiva de edición. La idea general es que tiene un navegador de archivos en la barra lateral donde cada archivo suele ser una hoja de estilo, un script o un recurso HTML que la página web ha cargado..
Al hacer clic en un recurso se muestran los contenidos en el panel principal. Puede notar la similitud que esto tiene con el Recursos panel, sin embargo, hay al menos una diferencia importante: la Fuentes panel contiene un editor en vivo. Los cambios que realice en las hojas de estilo se aplican instantáneamente a la página y los cambios que realiza en las secuencias de comandos se inyectan nuevamente en el motor V8 y se evalúan de inmediato. Esto no solo funciona para los archivos alojados de forma remota, sino también para los locales con la ventaja adicional de mantener los cambios en un archivo.
Nota: para hacer uso de los espacios de trabajo, los siguientes pasos solo son necesarios una vez por proyecto.
Abra una página web local y agregue su carpeta correspondiente en su sistema de archivos al área de trabajo mediante clic derecho en el Fuentes barra lateral del panel y seleccionando Agregar carpeta al área de trabajo.
Permitir el acceso de DevTools a la carpeta que acaba de agregar.
Tu nueva carpeta añadida aparecerá en la barra lateral de navegación..
Botón derecho del ratón en un archivo dentro de una carpeta con recursos de la red en el Fuentes panel (asegúrese de que tenga una asignación obvia a un archivo en su sistema de archivos) y seleccione Mapa de recursos del sistema de archivos.
La primera sugerencia proporcionada por DevTools es la correcta. Ha notado que el archivo en mi sistema de archivos (/ Usuarios /… /bootstrap.css) tiene el mismo nombre que un archivo de recursos de red (http: // localhost /… /bootstrap.css). Verifique la asignación seleccionando el recurso correcto.
DevTools ahora entiende la asignación entre los recursos del sistema de archivos y los recursos de red. Cuando tú Comando / Control-Clic un selector de la Estilos panel y final en el Fuentes panel, ahora se le muestra su archivo fuente de MENOS real. Puede editar un archivo en la Fuentes Panel y esos cambios persistirán en el disco cuando Comando / Control-S.
Hemos recorrido todo este camino, así que completemos este flujo de trabajo utilizando una tarea de vigilancia de Grunt para observar los cambios realizados en los archivos de MENOS y luego compilar automáticamente nuestro CSS y hacer un archivo de mapa de origen correspondiente.
Con la configuración de Espacios de trabajo, configure Grunt (u otra herramienta de su elección) para observar los cambios en los archivos de origen MENOS y compile un nuevo archivo CSS (con un Mapa de origen). DevTools recogerá este cambio automáticamente y aplicará cualquier estilo nuevo a la página..
Nota: habilite el Auto-recargar CSS generado bandera en el Ajustes Panel para utilizar este flujo de trabajo..
Aquí hay un resumen de los pasos automatizados que ocurrirán:
Aquí hay un Gruntfile simplificado:
Accentsconagua
module.exports = function (grunt) 'use strict'; require ('matchdep'). filterDev ('grunt -! (cli)'). forEach (grunt.loadNpmTasks); grunt.initConfig (less: dev: options: sourceMap: true, sourceMapFilename: 'bootstrap.map', archivos: 'less / bootstrap.css': 'less / bootstrap.less', watch : todos: archivos: ['menos / ** / *. menos'], tareas: ['menos'],); grunt.registerTask ('predeterminado', ['menos', 'ver']); ; Nota: el fragmento de código anterior proviene del repositorio de demostración.
Después de un npm instalar, corriendo gruñido en su terminal debe mostrar una tarea de vigilancia en ejecución.
DevTools ya tiene acceso de escritura a su carpeta de desarrollo (a través de Workspaces). Comando / Control-S tus cambios en el Fuentes para que DevTools sobrescriba el archivo LESS de origen con su nuevo cambio, Grunt compila un nuevo archivo CSS que DevTools introduce y aplica a la página.
gruñido-contrib- * tareas para la mayoría de estas herramientas (Sass, Compass, LESS, autoprefixr, UglifyJS2, CoffeeScript) que se combinan bien con un flujo de trabajo de carga de datos.less.js # 1050-permitir crear un mapa fuente.¿Te gusta lo que has aprendido? Aprenda más sobre Chrome DevTools!
