Share
Dies ist eine vollständige Anleitung zur Verwendung von LESS mit den DevTools von Chrome. Wenn Sie Sass mit den DevTools von Chrome verwendet haben, sind Sie wahrscheinlich bereits mit den hier vorgestellten Konzepten vertraut.
Vor nicht allzu langer Zeit haben die Chrome DevTools eine Reihe von IDE-ähnlichen Funktionen hinzugefügt (und tun dies auch weiterhin). Eine davon ist die Fähigkeit, die Zuordnung zwischen einer kompilierten Datei und der entsprechenden Quelldatei zu verstehen. Möglich wird dies dank Source Maps.
Alles, was hier erwähnt wird, ist in Chrome Canary verfügbar.
Als Erstes installieren Sie die neueste (1.5.1 zum Zeitpunkt dieses Schreibens) Version von LESS über NPM (Source Maps kam in 1.5.0):
$ npm install -g weniger $ lessc -v lessc 1.5.1 (LESS Compiler) [JavaScript]
An diesem Punkt können Sie den LESS-Compiler in Ihrem Terminal mithilfe von ausführen lessc Befehl.
Erstellen Sie eine neue LESS-Datei. Zu Demonstrationszwecken wird es kurz und einfach gehalten.
@color: # 4D926F; #header color: @color;
Um die LESS-Datei in eine CSS-Datei umzuwandeln, ist dies ein einfacher Fall:
lessc header.less header.css
Wir brauchen jetzt eine Source Map-Datei. Erstelle es mit der -Quellkarte Flagge.
lessc --source-map = header.map header.less header.css
Bei Verwendung des oben gezeigten LESS-Codes wird durch Ausführen dieses Befehls eine Quellenzuordnungsdatei mit folgendem Inhalt erstellt:
"version": 3, "file": "header.css", "sources": ["header.less"], "names": [], "mappings": "AAEQ; EACP, cAAA"
In einer Welt ohne In Source Maps werden von DevTools Stile angezeigt, die vom kompilierten CSS stammen. Die Zeilennummerierung ist nicht sinnvoll, da das kompilierte CSS nicht mit dem Quell-CSS übereinstimmt. Mit Quellkarten: Wenn Sie einen DOM-Knoten auf der Seite untersuchen, zeigt DevTools automatisch die Stile an, die aus der LESS-Quelldatei stammen.
Anzeigen einer Webseite, die auf das zuvor erwähnte verweist header.css ist jetzt auf eine sinnvollere Weise inspizierbar.
Während Sie halten Befehl (Steuerung Klicken Sie unter Windows) auf eine Eigenschaft, einen Wert oder einen Selektor, um zur Codezeile in der entsprechenden LESS-Quelldatei im zu springen Quellen Panel.
Das Anzeigen von LESS-Code in DevTools ist sicherlich hilfreich, aber die Integration eines Authoring-Workflows kann den Iterationszyklus beschleunigen. Der nächste Schritt besteht darin, DevTools mitzuteilen, wie die Ressourcen auf einer Webseite Dateien in einem Dateisystem zugeordnet werden. Geben Sie Folgendes ein: Arbeitsbereiche.
Hinweis: Arbeitsbereiche eignen sich für viele Projekte, nicht nur für solche, die CSS-Präprozessoren verwenden.
Sie sind vielleicht schon mit dem vertraut Quellen Panel aus einer Bearbeitungsperspektive. Die allgemeine Idee ist, dass sich in der Seitenleiste ein Datei-Navigator befindet, in dem jede Datei normalerweise ein Stylesheet, Skript oder eine HTML-Ressource ist, die von der Webseite geladen wurde.
Durch Klicken auf eine Ressource wird der Inhalt im Hauptfenster angezeigt. Möglicherweise bemerken Sie die Ähnlichkeit mit der Ressourcen Panel gibt es jedoch mindestens einen wesentlichen Unterschied: die Quellen Das Panel enthält einen Live-Editor. Änderungen, die Sie an Stylesheets vornehmen, werden sofort auf die Seite angewendet, und Änderungen, die Sie an Skripts vornehmen, werden wieder in die V8-Engine eingefügt und sofort ausgewertet. Dies funktioniert nicht nur für remote gehostete Dateien, sondern auch für lokale Dateien mit dem zusätzlichen Vorteil, dass Ihre Änderungen an einer Datei beibehalten werden.
Hinweis: Um Arbeitsbereiche zu nutzen, sind die folgenden Schritte nur einmal pro Projekt erforderlich.
Öffnen Sie eine lokale Webseite und fügen Sie den entsprechenden Ordner in Ihrem Dateisystem zum Arbeitsbereich hinzu Rechtsklick in dem Quellen Panel-Seitenleiste und Auswählen Ordner zum Arbeitsbereich hinzufügen.
Erlauben Sie DevTools den Zugriff auf den Ordner, den Sie gerade hinzugefügt haben.
Der neu hinzugefügte Ordner wird in der Navigationsleiste der Seitenleiste angezeigt.
Rechtsklick in einer Datei in einem Ordner mit Netzwerkressourcen in der Quellen und vergewissern Sie sich, dass es eine offensichtliche Zuordnung zu einer Datei in Ihrem Dateisystem hat Zu Dateisystemressource zuordnen.
Der erste Vorschlag von DevTools ist der richtige. Es wurde festgestellt, dass die Datei in meinem Dateisystem (/ Benutzer /… /bootstrap.css) hat den gleichen Namen wie eine Netzwerkressourcendatei (http: // localhost /… /bootstrap.css). Überprüfen Sie die Zuordnung, indem Sie die richtige Ressource auswählen.
DevTools versteht nun die Zuordnung zwischen Dateisystemressourcen und Netzwerkressourcen. Wenn du Befehl / Control-Klick eine Auswahl aus der Styles Panel und Ende in der Quellen In diesem Fenster wird Ihnen nun Ihre eigentliche LESS-Quelldatei angezeigt. Sie können eine Datei im bearbeiten Quellen Panel und diese Änderungen bleiben auf der Festplatte erhalten, wenn Sie Befehl / Steuerung-S.
Wir sind den ganzen Weg gegangen, also lassen Sie uns diesen Workflow abschließen, indem Sie mit einer Grunt-Überwachungsaufgabe nach Änderungen suchen, die an den LESS-Dateien vorgenommen wurden. Anschließend wird unser CSS automatisch kompiliert und eine entsprechende Quellenzuordnungsdatei erstellt.
Wenn Arbeitsbereiche eingerichtet sind, konfigurieren Sie Grunt (oder ein anderes Tool Ihrer Wahl) so, dass Änderungen an LESS-Quelldateien überwacht werden, und kompilieren Sie eine neue CSS-Datei (mit einer Quellzuordnung). DevTools nimmt diese Änderung automatisch auf und wendet alle neuen Stile auf die Seite an.
Hinweis: Aktivieren Sie die Generiertes CSS automatisch neu laden Flagge in der die Einstellungen Panel, um diesen Workflow zu verwenden.
Hier ist ein Überblick über die automatisierten Schritte, die ausgeführt werden:
Hier ist ein vereinfachtes Gruntfile:
Accentsconagua
module.exports = Funktion (grunzen) 'use strict'; required ('matchdep'). filterDev ('grunt -! (cli)'). forEach (grunt.loadNpmTasks); grunt.initConfig (less: dev: Optionen: sourceMap: true, sourceMapFilename: 'bootstrap.map', Dateien: 'less / bootstrap.css': 'less / bootstrap.less' : alle: Dateien: ['less / ** / *. less'], Aufgaben: ['less'],); grunt.registerTask ('default', ['less', 'watch']); ; Hinweis: Das obige Code-Snippet stammt aus dem Demo-Repository.
Nach einem npm installieren, Laufen grunzen In Ihrem Terminal sollte eine laufende Überwachungsaufgabe angezeigt werden.
DevTools hat bereits Schreibzugriff auf Ihren Entwicklungsordner (über Workspaces).. Befehl / Steuerung-S deine Änderungen in der Quellen Damit DevTools die LESS-Quelldatei mit Ihrer neuen Änderung überschreiben kann, kompiliert Grunt eine neue CSS-Datei, die von DevTools eingelesen und auf die Seite angewendet wird.
Grunzen-Beitrag * Aufgaben für die meisten dieser Tools (Sass, Compass, LESS, Autoprefix, UglifyJS2, CoffeeScript), die sich nahtlos in einen Workflow mit hoher Arbeitsgeschwindigkeit integrieren lassen.less.js # 1050-Erlaube das Erstellen einer Quellkarte.Was hast du gelernt? Weitere Informationen zu Chrome DevTools!
