Share
Dit is een complete tutorial over het gebruik van LESS met Chrome's DevTools. Als je Sass hebt gebruikt met de DevTools van Chrome, ben je waarschijnlijk al bekend met de concepten die hier zijn geïntroduceerd.
Nog niet zo lang geleden hebben de Chrome DevTools een aantal IDE-achtige functies toegevoegd (en blijven dit doen), waaronder de mogelijkheid om de toewijzing tussen een samengesteld bestand en het bijbehorende bronbestand te begrijpen. Dit wordt mogelijk gemaakt dankzij Source Maps.
Alles wat hier wordt genoemd, is beschikbaar in Chrome Canary.
Eerste ding eerst, installeer de nieuwste (1.5.1 op het moment van dit schrijven) versie van LESS via NPM (Source Maps aangekomen in 1.5.0):
$ npm installatie -g minder $ lessc -v minderc 1.5.1 (LESS Compiler) [JavaScript]
Op dit punt kunt u de LESS-compiler in uw terminal gebruiken met behulp van de lessc commando.
Maak een nieuw MINDER bestand. Voor demonstratiedoeleinden zal het kort en eenvoudig worden gehouden.
@color: # 4D926F; #header color: @color;
Om het LESS-bestand in een CSS-bestand om te zetten, is het een eenvoudig geval van uitvoeren:
lessc header.less header.css
We hebben nu een Source Map-bestand nodig. Maak het met de -source-map vlag.
lessc - resource-map = header.map header.less header.css
Met de bovenstaande LESS-code produceert het uitvoeren van deze opdracht een Source Map-bestand met de volgende inhoud:
"Versie": 3, "file": "header.css", "bronnen": [ "header.less"], "namen": [], "mappings": "AAEQ; EACP, Caaa"
In een wereld zonder Bronkaarten, DevTools zou stijlen weergeven die afkomstig zijn van de gecompileerde CSS. Regelnummering zou niet nuttig zijn vanwege een mismatch tussen gecompileerde CSS en de bron-CSS. Met Bronkaarten, bij het inspecteren van een DOM-knooppunt op de pagina, toont DevTools automatisch de stijlen die afkomstig zijn van het LESS-bronbestand.
Een webpagina bekijken die verwijst naar de eerder genoemde header.css is nu op een meer betekenisvolle manier inspecteerbaar.
Tijdens het vasthouden Commando (Controle op Windows), klik op een eigenschap, waarde of selector om naar de regel met code in het corresponderende LESS-bronbestand binnen de bronnen paneel.
Het bekijken van LESS-code in de DevTools is zeker nuttig, maar het integreren van een authoringworkflow kan uw iteratiecyclus versnellen. De volgende stap is om DevTools te laten weten hoe de bronnen op een webpagina verwijzen naar bestanden in een bestandssysteem. Ga naar: werkruimten.
Opmerking: werkruimten zijn geschikt voor veel projecten, niet alleen voor degenen die CSS-preprocessors gebruiken.
Misschien bent u al bekend met de bronnen paneel vanuit een bewerkingsperspectief. Het algemene idee is dat je een bestandsnavigator in de zijbalk hebt, waarbij elk bestand meestal een stijlblad, script of HTML-bron is die door de webpagina is geladen.
Als u op een resource klikt, wordt de inhoud in het hoofdvenster weergegeven. U ziet misschien de gelijkenis die dit heeft met de Middelen panel, maar er is minstens één groot verschil: de bronnen paneel bevat een live-editor. Wijzigingen die u in stylesheets aanbrengt, worden onmiddellijk op de pagina toegepast en wijzigingen die u aanbrengt in scripts worden terug in de V8-engine ingespoten en onmiddellijk geëvalueerd. Dit werkt niet alleen voor op afstand gehoste bestanden, maar ook voor lokale bestanden met het extra voordeel dat het uw wijzigingen in een bestand aanhoudt.
Opmerking: om gebruik te maken van werkruimten, zijn de volgende stappen slechts eenmaal per project vereist.
Open een lokale webpagina en voeg de overeenkomstige map op uw bestandssysteem toe aan de werkruimte rechtermuisknop te klikken in de bronnen paneelzijbalk en selecteren Map toevoegen aan werkruimte.
Geef DevTools toegang tot de map die u zojuist hebt toegevoegd.
Uw nieuw toegevoegde map verschijnt in de zijbalknavigatie.
Klik met de rechtermuisknop op een bestand binnen een map met netwerkbronnen in de bronnen paneel (zorg ervoor dat het een duidelijke toewijzing aan een bestand op uw bestandssysteem heeft) en selecteer Map naar bestandssysteemresource.
De eerste suggestie van DevTools is de juiste. Het heeft gemerkt dat het bestand op mijn bestandssysteem (/ Gebruikers / ... /bootstrap.css) heeft dezelfde naam als een netwerkresourcebestand (http: // localhost / ... /bootstrap.css). Controleer de toewijzing door de juiste resource te selecteren.
DevTools begrijpt nu de toewijzing tussen bestandssysteembronnen en netwerkbronnen. Wanneer je Command / Control-klik een selector uit de stijlen paneel en eindig in de bronnen paneel, wordt nu uw werkelijke LESS-bronbestand getoond. U kunt een bestand bewerken in de bronnen paneel en die veranderingen blijven op schijf als u Command / Ctrl-S.
We zijn helemaal hierheen gekomen, dus laten we deze workflow voltooien door een Grunt-kijktaak te gebruiken om te kijken naar wijzigingen die in de LESS-bestanden zijn aangebracht en vervolgens automatisch onze CSS te compileren en een bijbehorend Source Map-bestand te maken.
Configureer met de instellingen van Workspaces Grunt (of een ander hulpmiddel naar keuze) om wijzigingen in LESS-bronbestanden te bekijken en een nieuw CSS-bestand te compileren (met een bronkaart). DevTools neemt deze wijziging automatisch op en past nieuwe stijlen toe op de pagina.
Opmerking: schakel het Gegenereerde CSS automatisch herladen vlag in de instellingen paneel om deze workflow te gebruiken.
Hier volgt een overzicht van de geautomatiseerde stappen die zullen plaatsvinden:
Hier is een vereenvoudigde Gruntfile:
Accentsconagua
module.exports = functie (grunt) 'gebruik strict'; . Require ( 'matchdep') filterDev ( 'grunt - (cli)!') ForEach (grunt.loadNpmTasks). grunt.initConfig (minder: dev: options: sourceMap: true, sourceMapFilename: 'bootstrap.map', bestanden: 'less / bootstrap.css': 'less / bootstrap.less', bekijk : all: files: ['less / ** / *. less'], tasks: ['less'],); grunt.registerTask ('standaard', ['minder', 'kijk']); ; Opmerking: het bovenstaande codefragment komt uit de demo-repository.
Na een npm installeren, lopend knorren in uw terminal moet een kijktaak worden weergegeven.
DevTools heeft al schrijftoegang tot uw ontwikkelmap (via Workspaces). Command / Ctrl-S uw wijzigingen in de bronnen paneel om DevTools te laten overschrijven het bron MINDER bestand met je nieuwe wijziging, Grunt stelt een nieuw CSS-bestand samen dat DevTools inhaalt en toepast op de pagina.
grunt-contrib- * taken voor de meeste van deze tools (Sass, Compass, LESS, autoprefixr, UglifyJS2, CoffeeScript) die goed aansluiten bij een workflow met livereload.less.js # 1050-staat het maken van een bronkaart toe.Vind je het leuk wat je hebt geleerd? Meer informatie over Chrome DevTools!
