Share
Acesta este un tutorial complet pentru a utiliza LESS cu DevTools-ul Chrome. Dacă ați folosit Sass cu DevTools-ul Chrome, cel mai probabil veți fi deja familiarizați cu conceptele introduse aici.
Nu cu mult timp în urmă, Chrome DevTools a adăugat o serie de funcții asemănătoare IDE (și continuă să facă acest lucru), dintre care una este abilitatea de a înțelege maparea între un fișier compilat și fișierul sursă corespunzător. Acest lucru este posibil datorită hărților sursă.
Totul menționat aici este disponibil în programul Canary Chrome.
Primul lucru este mai întâi să instalați cea mai recentă versiune (1.5.1 la momentul acestei scrieri) a LESS prin intermediul NPM (hărțile sursă au ajuns în 1.5.0):
$ npm install -g mai puțin $ lessc -v lessc 1.5.1 (LESS Compiler) [JavaScript]
În acest moment, puteți rula un compilator LESS în terminal folosind lessc comanda.
Creați un nou fișier LESS. În scopuri demonstrative, va fi scurt și simplu.
@color: # 4D926F; #header culoare: @color;
Pentru a transforma fișierul LESS într-un fișier CSS, este un caz simplu de rulare:
lessc header.less header.css
Acum avem nevoie de un fișier sursă. Creați-o cu -Sursa hartă steag.
lessc --source-map = header.map header.less header.css
Folosind codul LESS prezentat mai sus, executarea acestei comenzi produce un fișier Source Map cu următorul conținut:
"Versiune": 3, "file": "header.css", "surse": [ "header.less"], "nume": [], "mapări": "AAEQ; EACP, CAAA"
Intr-o lume fără Source Maps, DevTools ar afișa stiluri originare din CSS compilat. Numerotarea liniilor nu ar fi utilă din cauza unei nepotriviri între CSS compilat și sursa CSS. Cu Sursa Hărți, atunci când inspectează un nod DOM pe pagină, DevTools va afișa automat stilurile care provin din fișierul sursă LESS.
Vizualizarea unei pagini web care face referire la cele menționate anterior header.css este acum inspectabil într-un mod mai semnificativ.
În timp ce țineți Comanda (Control pe Windows), faceți clic pe orice proprietate, valoare sau selector pentru a sări la linia de cod din fișierul sursă LESS corespunzător din cadrul surse panou.
Vizionarea codului LESS în DevTools este cu siguranță utilă, dar integrarea unui flux de lucru de creație poate accelera ciclul de iterație. Următorul pas este să informați DevTools despre modul în care resursele dintr-o hartă a unei pagini web se află în fișierele dintr-un sistem de fișiere. Introduceți: Spații de lucru.
Notă: Spațiile de lucru sunt potrivite pentru multe proiecte, nu doar pentru cele care utilizează preprocesoare CSS.
S-ar putea să fiți deja familiarizați cu surse panou dintr-o perspectivă de editare. Ideea generală este că aveți un navigator de fișiere în bara laterală unde fiecare fișier este de obicei o foaie de stil, un script sau o resursă HTML pe care pagina web a încărcat-o.
Dacă faceți clic pe o resursă, afișați conținutul din panoul principal. Puteți observa asemănarea cu aceasta Resurse Cu toate acestea, există cel puțin o diferență majoră: surse panoul conține un editor live. Modificările aduse foilor de stil sunt aplicate instantaneu paginii, iar modificările aduse scripturilor sunt injectate înapoi în motorul V8 și evaluate imediat. Nu numai că acest lucru funcționează pentru fișierele găzduite de la distanță, dar și pentru cele locale, cu avantajul suplimentar de a persista modificările într-un fișier.
Notă: Pentru a utiliza spațiile de lucru, următorii pași sunt necesari numai o dată pe proiect.
Deschideți o pagină web locală și adăugați folderul corespunzător în sistemul de fișiere în spațiul de lucru clic dreapta în surse bara laterală a panoului și selectarea Adăugați folderul în spațiul de lucru.
Permiteți accesului DevTools la dosarul pe care tocmai l-ați adăugat.
Dosarul nou adăugat va apărea în navigarea barei laterale.
Click dreapta pe un fișier din cadrul unui dosar cu resurse în rețea din surse (asigurați-vă că are o mapare evidentă la un fișier din sistemul de fișiere) și selectați Harta la Resursa sistemului de fișiere.
Prima sugestie oferită de DevTools este cea corectă. A remarcat că fișierul din sistemul meu de fișiere (/ Utilizatori / ... / bootstrap.css) are același nume ca un fișier de rețea (http: // localhost / ... / bootstrap.css). Verificați cartografia selectând resursele corecte.
DevTools înțelege acum cartografierea între resursele de sistem de fișiere și resursele de rețea. Cand tu Comandă / Control-clic un selector de la stiluri panou și se termină în surse panou, vi se afișează acum fișierul sursă LESS actual. Puteți edita un fișier în surse și acele modificări vor persista pe disc atunci când Comandă / control-S.
Am venit în acest fel, așa că hai să terminăm acest flux de lucru folosind o sarcină Grunt watch pentru a urmări schimbările aduse fișierelor LESS și apoi să ne compilam în mod automat CSS și să facem un fișier corespunzător Map Map.
Dacă ați configurat spațiu de lucru, configurați Grunt (sau altă unealtă la alegere) pentru a urmări modificările la fișierele LESS mai mici și pentru a compila un nou fișier CSS (cu o hartă sursă). DevTools va prelua automat această modificare și va aplica orice fel de stiluri noi paginii.
Notă: Activați funcția Reîncărcați automat CSS generat pavilion în Setări pentru a utiliza acest flux de lucru.
Iată o schemă a etapelor automate care vor avea loc:
Iată un Grundfile simplificat:
Accentsconagua
module.exports = function (grunt) 'foloseste strict'; . Require ( 'matchdep') filterDev ( 'groh - (cli)!') Foreach (grunt.loadNpmTasks);. (mai puțin: dev: options: sourceMap: true, sourceMapFilename: 'bootstrap.map', fișiere: 'less / bootstrap.css': 'less / bootstrap.less' : toate: fișiere: ['less / ** / *. less'], sarcini: ['less'],); grunt.registerTask ("default", ['less', 'watch']); ; Notă: Fragmentul de cod de mai sus vine de la magazia demo.
După un an npm install, alergare mormăit în terminalul dvs. ar trebui să se afișeze o sarcină de ceas care rulează.
DevTools are deja acces de scriere la folderul de dezvoltare (prin Spații de lucru). Comandă / control-S modificările dvs. în surse pentru a suporta DevTools fișierul sursă LESS cu noua dvs. modificare, Grunt compilează un nou fișier CSS pe care DevTools îl trage și se aplică paginii.
mormăit-* con- pentru cele mai multe dintre aceste instrumente (Sass, Compass, LESS, autoprefixr, UglifyJS2, CoffeeScript), care se leagă frumos de fluxul de lucru livereload.less.js # 1050-permite crearea unei hărți sursă.Cum ai învățat? Aflați mai multe despre Chrome DevTools!
