Share
CSS-Präprozessoren sind für die meisten Front-End-Entwickler zu einem unverzichtbaren Werkzeug geworden. Trotz der vielen Vorteile, die sie bieten, stellen Werkzeuge wie LESS, Stylus oder Sass auch neue Probleme dar, von denen wir in diesem Lernprogramm sprechen (und lösen werden).
Wenn Sie nicht an einer kleinen Website mit sehr wenigen Seiten arbeiten, empfiehlt es sich, das Stylesheet in mehrere Module aufzuteilen, oder partials. Zum Beispiel könnten wir die Stile für die Navigation in ihre eigene partielle Datei namens navbar.scss (der Präprozessor, der hier Sass ist) einteilen. Anschließend importieren wir dieses zusammen mit anderen Partials mithilfe von in ein einziges primäres Stylesheet @einführen Direktive, nach der sie in eine einzige CSS-Datei kompiliert werden. Hier beginnt das Problem.
Browser parsen das kompilierte CSS, nicht Ihre Arbeitsdateien, was das Stil-Debugging letztendlich schwieriger macht. Der Debugging-Prozess kann sehr umständlich sein, wenn Sie ein umfangreiches Projekt mit Dutzenden von Stylesheets bearbeiten. Herauszufinden, wo kompilierte Stile entstanden sind, kann fast unmöglich sein.
Wie Sie unten sehen können, verweist der Web-Inspector auf die .css-Datei und teilt uns mit, dass der Stil für Karosserie wird online erklärt 270. Das hilft uns nicht viel, denn in unseren Arbeitsdateien wird es tatsächlich in Scaffolding.Online angegeben 27.
Verwendung einer Quellkarte wird diese kommunalen Stilsprachen überbrücken. Quellkarten sind separat generierte Dateien, die es dem Browser ermöglichen, das kompilierte CSS auf seine ursprüngliche Quelle zurückzuführen. Tatsächlich können Quellkarten in vielen Codierungsumgebungen verwendet werden:
„Quellkarten bieten eine sprachunabhängige Möglichkeit, Produktionscode dem ursprünglich erstellten Code zuzuordnen.“ - Sayanee Basu
Für unsere Zwecke machen Quellkarten das Stil-Debugging mit einem CSS-Präprozessor so vertraut wie das Arbeiten mit normalem CSS. Wie Sie unten sehen können, zeigt der Web-Inspector dank der Quellenzuordnung jetzt die Stilreferenz auf die Originalquelle an.
Zunächst müssen Sie eine Quellkartendatei (.map) zusammen mit dem generierten CSS generieren. Diese .map-Datei enthält JSON-formatierten Code, der als Referenz zwischen der kompilierten Datei und der Originalquelle dient. Sass fügte die Unterstützung für das Generieren von Quellkarten in Version 3.3 hinzu, LESS fügte sie in Version 1.5.0 hinzu. Informationen zur Stylus-Unterstützung von Quellkarten finden Sie in der Dokumentation.
Jeder hat seine eigenen Vorlieben, wenn es darum geht, die Werkzeuge zu finden, die in seinen Workflow passen. Abgesehen von der nativen Befehlszeilenschnittstelle (CLI), die jeder CSS-Präprozessor bereitstellt, haben wir auch einige andere Optionen wie Grunt und Gulp, sogar Anwendungen wie Codekit.
Alle Haupt-Präprozessoren können über ihre CLI eine Quellkarte erstellen.
Mit WENIGER könnten Sie dazu beitragen --Quellkarte so kennzeichnen:
lessc styles.less> styles.css --source-map = styles.css.map
In diesem Beispiel wird styles.less in styles.css kompiliert, während gleichzeitig die Quellkartendatei mit dem Namen "styles.css.map" generiert wird..
Sass-Benutzer können die --Sourcemap (ohne Bindestrich), um dasselbe zu tun, zum Beispiel:
sass styles.scss: styles.css --sourcemap
Im Gegensatz zu weniger, die --Sourcemap Flag in Sass muss den Dateinamen angeben. Sass benennt die Datei standardmäßig mit demselben Namen wie das kompilierte Stylesheet. Im obigen Beispiel wäre der Name der Quellzuordnung weiterhin "styles.css.map"..
Genau wie Sass benötigt der Stylus nur die --Sourcemap flag, oder bietet zusätzlich die Abkürzung -m:
Stift -m styles.styl
Dies gibt uns wieder "styles.css.map".
Wenn Sie einen Task Runner wie Grunt bevorzugen, verwenden Sie Grunt-Contrib-less, grunt-contrib-sass oder Grunt-Contrib-Stift Um das CSS zu kompilieren, fügen Sie dann die Option zum Generieren der Quellkarte hinzu. Das nachfolgende Beispiel entspricht im Wesentlichen dem vorherigen Beispiel. Es generiert aus unserer Datei styles.less eine Quellenzuordnung mit dem Namen "styles.css.map".
Accentsconagua
module.exports = function (grunt) grunt.initConfig (less: Optionen: sourceMap: true, sourceMapFilename: styles.css.map), Dateien: 'styles.css': 'styles.less' ); grunt.loadNpmTasks ('grunt-contrib-less'); grunt.registerTask ('default', ['less']); ;Sass-Benutzer können Grunt-Contrib-Sass verwenden und die Option auf dieselbe Weise einstellen, beispielsweise:
module.exports = function (grunt) grunt.initConfig (sass: Optionen: Sourcemap: 'auto'), Dateien: 'styles.css': 'styles.scss'; grunt.loadNpmTasks ('grunt-contrib-sass'); grunt.registerTask ('default', ['sass']); ;Der einfachste Weg, insbesondere wenn Sie mit der Befehlszeile nicht so vertraut sind, ist die Verwendung einer grafischen Benutzeroberfläche wie Codekit, Prepros oder Koala. Mit der Anwendung ist das Erstellen einer Quellkarte so einfach wie ein Klick.
Die Source Map-Option in Codekit.Sobald die Quellenzuordnung erfolgreich erstellt wurde, finden Sie eine neue Datei .Karte Die Referenz verweist auf die Quellkartendatei am unteren Rand des kompilierten Stylesheets. Dieser Referenzkommentar sieht normalerweise ein bisschen wie folgt aus:
/ * # sourceMappingURL = style.css.map * /
Alle aktuellen Browser unterstützen Quellkarten. Safari aktiviert sich automatisch, sobald die Quellkartendatei verfügbar ist, ohne dass eine Konfiguration erforderlich ist. In den anderen Browsern wie Firefox, Chrome und Opera sind die Quellkarten standardmäßig deaktiviert. In diesem Fall müssen Sie die Einstellungen umschalten.
In Firefox ist die Überprüfung der Quellkarten nur über die in Firefox integrierten DevTools verfügbar. Firebug - das einst beliebte Debugging-Add-On für Firefox - hat diese Funktion leider noch nicht hinzugefügt. Starten Sie daher die Firefox DevTools und aktivieren Sie Quellkarten, indem Sie mit der rechten Maustaste auf eine beliebige Stilreferenz klicken und im Kontextmenü die Option "Originalquellen anzeigen" auswählen.
Klicken Sie in Chrome (sowie Opera 12 und höher) im Web-Inspector auf das Symbol „Zahnrad“ und stellen Sie sicher, dass dies der Fall ist Aktivieren Sie CSS-Quellkarten wird geprüft.
Sobald die Quellkartendatei erstellt und die Funktion im Browser aktiviert ist, sollten Sie den Inspektor finden, der auf die ursprüngliche Quelle zeigt. In diesem Fall können Sie sehen, dass der Inspektor direkt auf Gerüste verweist.
Mit den leistungsstarken Quellkarten an Ihren Fingerspitzen können Sie kompilierte Stile debuggen, so wie es Webdesigner seit Jahren mit CSS tun. Vergessen Sie nicht, eine Quellzuordnung für Ihr nächstes kompiliertes Stylesheet zu erstellen!
