Share
Detta är en komplett handledning för att använda LESS med Chrome DevTools. Om du har använt Sass med Chrome DevTools, kommer du med största sannolikhet redan att känna till de begrepp som introduceras här.
Inte för länge sedan har Chrome DevTools lagt till ett antal IDE-liknande funktioner (och fortsätter att göra det), varav en är förmågan att förstå mappningen mellan en kompilerad fil och motsvarande källfil. Detta är möjligt tack vare källkartor.
Allt som nämns här är tillgängligt i Chrome Canary.
Först och främst, installera den senaste versionen (1.5.1 vid tidpunkten för denna skrivande) version av LESS via NPM (Source Maps kom till 1.5.0):
$ npm installera -g mindre $ lessc -v lessc 1.5.1 (MINDER kompilator) [JavaScript]
Vid denna tidpunkt kan du köra MINDER kompilatorn i din terminal med hjälp av lessc kommando.
Skapa en ny MINDRE fil. För demonstrationsändamål kommer det att hållas kort och enkelt.
@color: # 4D926F; #header color: @color;
Om du vill göra den mindre filen till en CSS-fil är det enkelt att köra:
lessc header.less header.css
Vi behöver nu en källkarta-fil. Skapa det med -source-karta flagga.
lessc - source-map = header.map header.less header.css
Genom att använda den här LESS-koden visas det här kommandot med en källkartafil med följande innehåll:
"Version": 3, "fil": "header.css", "källor": [ "header.less"], "namn": [], "avbildningar": "AAEQ; EACP, cAAA"
I en värld utan Källkort, DevTools skulle visa stilar som härrör från den sammanställda CSS. Linjanummering skulle inte vara användbar på grund av en felaktig matchning mellan sammanställd CSS och källkoden CSS. Med Källkartor, när du inspekterar en DOM-nod på sidan, visar DevTools automatiskt de stilar som härrör från den LÄSTA källfilen.
Visa en webbsida som refererar till den tidigare nämnda header.css är nu inspekterbar på ett mer meningsfullt sätt.
Medan du håller Kommando (Kontrollera på Windows) klickar du på någon egenskap, värde eller väljare för att hoppa till koden i den motsvarande LESS-källfilen i källor panel.
Visning av MINDRE koden i DevTools är verkligen användbar, men integrering av ett authoring-arbetsflöde kan påskynda din iterationscykel. Nästa steg är att berätta för DevTools hur resurserna på en webbsida kartlägger till filer på ett filsystem. Ange: Arbetsytor.
Obs! Arbetsytor är lämpliga för många projekt, inte bara de som använder CSS preprocessorer.
Du kanske redan är bekant med källor panel från ett redigeringsperspektiv. Den allmänna tanken är att du har en filnavigator i sidofältet där varje fil typiskt är ett stilark, ett skript eller en HTML-resurs som webbsidan har laddat.
Om du klickar på en resurs visas innehållet i huvudpanelen. Du kanske märker likheten med detta Medel panelen, men det finns åtminstone en stor skillnad: källor panelen innehåller en levande redaktör. Ändringar du gör till stylesheets tillämpas direkt på sidan och ändringar som görs till skript sprutas in i V8-motorn och utvärderas omedelbart. Det här fungerar inte bara för fjärrstyrda filer, utan också för lokala enheter med den extra fördelen att du behåller dina ändringar i en fil.
Obs! För att använda Workspaces krävs endast följande steg en gång per projekt.
Öppna en lokal webbsida och lägg till motsvarande mapp på ditt filsystem till arbetsytan av högerklicka i källor panelens sidofält och välja Lägg till mapp till arbetsyta.
Tillåt DevTools åtkomst till den mapp du just har lagt till.
Din nyligen tillagda mapp visas i navigeringsnavigering.
Högerklicka på en fil i en nätverksansvarig mapp i källor panelen (se till att den har en uppenbar mappning till en fil i ditt filsystem) och välj Karta till File System Resource.
Det första förslaget från DevTools är det rätta. Det har märkt att filen i mitt filsystem (/ Användare / ... /bootstrap.css) har samma namn som en nätverksresursfil (http: // localhost / ... / bootstrap.css). Verifiera mappningen genom att välja rätt resurs.
DevTools förstår nu kartläggningen mellan filsystemresurser och nätverksresurser. När du Kommando / Control-klicka en väljare från Styles panel och sluta i källor panelen visas nu din faktiska LÄSTA källfil. Du kan redigera en fil i källor panelen och dessa ändringar kommer att fortsätta att disk när du Kommando / Control-S.
Vi har kommit allihopa, så låt oss slutföra detta arbetsflöde genom att använda en Grunt klockuppgift för att titta på ändringar som gjorts i de MINDERA filerna och sedan automatiskt sammanställa vår CSS och skapa en motsvarande Källkortsfil.
Med Workspaces konfigureras, konfigurerar du Grunt (eller ett annat verktyg som du väljer) för att titta på ändringar i LESS-källfiler och kompilera en ny CSS-fil (med en källkarta). DevTools hämtar automatiskt denna ändring och tillämpar nya stilar på sidan.
Obs! Aktivera Auto-reload genererad CSS flagga i inställningar panel för att använda detta arbetsflöde.
Här är en översikt över de automatiska stegen som kommer att inträffa:
Här är en förenklad Gruntfile:
Accentsconagua
module.exports = funktion (grunt) 'use strict'; . Kräver (matchdep) filterDev (grunt - (CLI)!) Foreach (grunt.loadNpmTasks). grunt.initConfig (mindre: dev: options: sourceMap: true, sourceMapFilename: 'bootstrap.map', filer: 'mindre / bootstrap.css': 'mindre / bootstrap.less' : alla: filer: ['mindre / ** / *. mindre'], uppgifter: ['mindre'],); grunt.registerTask ('default', ['mindre', 'watch']); ; Obs! Kodstycket ovan kommer från demoförvaret.
Efter en npm installera, löpning grymta I din terminal bör det visas en klockuppgift som körs.
DevTools har redan skrivåtkomst till din utvecklingsmapp (genom Workspaces). Kommando / Control-S dina ändringar i källor panelen för att ha DevTools skriva över källan MINDRE filen med din nya ändring, kompilerar Grunt en ny CSS-fil som DevTools drar in och gäller för sidan.
grunt-bidragit * uppgifter för de flesta av dessa verktyg (Sass, Kompass, MINDRE, autoprefixr, UglifyJS2, CoffeeScript) som fäster snyggt i ett arbetsbelastningsflöde.less.js # 1050-tillåta att skapa en källkarta.Gilla vad du har lärt dig? Läs mer om Chrome DevTools!
