Share
In diesem Artikel erfahren Sie, wie wir Chrome DevTools besser in unseren Sass-Entwicklungsworkflow integrieren können.
Hier ist ein Blick auf das, was wir in diesem Tutorial über eine animierte GIF machen werden:
Auf der linken Seite befindet sich ein Terminal und der Sublime-Texteditor. Auf der rechten Seite befindet sich Chrome. Änderungen an der .scss Die Datei wird auf der Festplatte gespeichert, was sich in Sublime widerspiegelt. Der Befehl Sass watch generiert eine neue Version einer CSS-Datei, wenn Änderungen an der Sass-Datei festgestellt werden, die wiederum von DevTools abgerufen und auf der Seite angezeigt wird.
Was versuchen wir hier zu lösen? Warum wollen wir einen besseren Workflow? Schauen wir uns ein Beispiel für das Debuggen von mit Sass generiertem CSS an .scss Datei, die enthält:
$ myColor: grün; body .box color: $ myColor;
Und jetzt würde das CSS, das von der obigen Sass-Datei erzeugt wird, folgendermaßen aussehen:
körper .box farbe: grün;
Jetzt brauchen wir nur etwas HTML, um unser Styling anzuwenden:
Hallo
Ok, so weit so gut. Nun möchten wir mit Chrome DevTools beginnen, unsere Seite zu entwerfen und zu entwickeln. Zuerst prüfen wir die div mit einer Klasse von Box Klicken Sie mit der rechten Maustaste darauf und wählen Sie aus Element prüfen. Dann können wir den Stilbereich auschecken, der einen grünen Wert für den anzeigt Farbe Eigenschaft, ein Hinweis auf den darin enthaltenen Dateinamen sowie die Zeilennummer, in der der Selektor angezeigt wird. Nun, hier liegt das Problem - das verarbeitete CSS folgt nicht Zeile für Zeile der Quelle .scss Datei sieht aus wie, was sich negativ auf unseren Entwicklungsworkflow auswirken kann.
Im Bild oben zeigt der linke Bereich eine Quelle .scss Datei und die rechte Seite zeigt die bearbeitete Version. (Hinweis: Ich verwende das SCSS-Bundle zur Syntaxhervorhebung in Sublime Text.)
DevTools bietet dann einen Link zu der oben rot hervorgehobenen Datei- und Zeilennummer des Selektors, die nicht überraschend auf die verarbeitete Datei verweist (Bild unten). Dies stellt nun eine Einschränkung für das Bearbeiten der Datei in DevTools dar, da das Speichern von Dateien nicht von Vorteil ist. Wenn wir beispielsweise Änderungen an der verarbeiteten Datei beibehalten, werden diese bei der nächsten Ausführung von Sass nur überschrieben.
Tatsächlich haben wir nicht einmal einen klaren Hinweis darauf, was die entsprechende Zeilennummer ist - natürlich ist unser Beispiel sehr einfach und wir können sehr schnell verstehen, welche Zeile zu was passt, indem wir uns den Code ansehen. Jedoch in einem größeren .scss Datei, Dinge können schwieriger werden.
Wie Sie oben sehen können, hat DevTools kein Verständnis von unserem .scss Wir können dies jedoch mit Hilfe eines DevTools- und Sass-Workflows angehen, was wir in diesem Tutorial betrachten werden. Zusammenfassend kann ein Mangel an Sass-Unterstützung in den DevTools bedeuten:
Accentsconagua
.scss Die Datei im Quellenbedienfeld ist schwierig, da DevTools die Erweiterung nicht als eine Datei erkennt, die angezeigt werden soll.Wichtig: Sass-Support ist eine experimentelle Funktion. Bitte bedenken Sie, dass sich die Dinge ändern können, solange es schon eine Weile her ist. In diesem Fall werden wir unser Bestes tun, um diesen Artikel entsprechend zu aktualisieren.
Nun navigieren wir zu über: Flaggen in der omnibox dann finden Aktivieren Sie Developer Tools-Experimente, Aktivieren Sie es und starten Sie Chrome neu.
Das Bild unten zeigt ein Experimentierfeld. Sie können dieses erreichen, indem Sie auf das Zahnrad in der rechten unteren Ecke von DevTools klicken und auf 'Experimente', dann kreuzen Sie das Kästchen an Unterstützung für Sass.
Nach dem Schließen und Öffnen von DevTools können Sie jetzt in die Allgemeines Menüpunkt in der linken Seitenleiste des die Einstellungen Fenster und navigieren Sie zum Quellen Abschnitt, von dort aus überprüfen 'Aktivieren Sie Quellkarten' und 'CSS automatisch nach Sass speichern'. Das Auszeit kann auf dem Standardwert belassen werden.
In diesem Lernprogramm wird die neueste Version von Sass (3.3.0 zum aktuellen Zeitpunkt) verwendet, da Quellkarten anfänglich unterstützt werden. So können Sie Sass mit Rubygems installieren:
gem install sass --pre
Wir müssen Sass jetzt sagen, dass er unser kompilieren soll .scss Dateien mit dem folgenden Befehl:
sass --watch --scss --sourcemap styles.scss: styles.css
Von oben die styles.scss ist deine Quelldatei und die styles.css ist die verarbeitete Datei, die Ihre HTML-Seite verwenden würde. So würden Sie in den bearbeiteten Link einbinden .css Datei:
Wenn Sie in Ihrem Terminal etwas Ähnliches wie in der Abbildung unten sehen:
… Und Sie sehen ein generiertes .Karte Datei, dann Glückwunsch: Sass Debugging funktioniert! Diese anderen Befehlsoptionen führen den vorherigen Kompilierungsbefehl aus:
--sehen: Wird auf Änderungen an der Quelle achten .scss Datei und kompilieren Sie es, sobald eine Änderung festgestellt wurde.--scss: Zeigt an, welchen Sass-Stil wir verwenden.--Sourcemap: Erzeugt entsprechende Quellkartendateien.Nun ist es nicht unbedingt wichtig, die Quellkarten zu verstehen, aber es ist auf jeden Fall etwas zu lesen, da es den Entwicklungsprozess unterstützen soll. Nachfolgend finden Sie einige Ressourcen zu Quellkarten.
Vorausgesetzt, es lief alles gut. Wenn Sie Ihre Seite öffnen, auf der die Unterstützung von Sass in DevTools aktiviert ist, sollte das Debuggen von Sass möglich sein. Das erste, was zu beachten ist, ist, dass der Dateiname das entsprechende anzeigt .scss Quelldatei, was nützlich ist. Darüber hinaus gibt die Zeilennummer die Zeilennummer in unserer Quelldatei korrekt wieder.
Wenn Sie auf den Dateinamen klicken, gelangen Sie direkt zum Quellenfeld mit der Zeile, die dem ausgewählten Selektor markiert ist.
Hinweis: Sie haben jetzt in Ihrem Browser eine sichtbare Sass-Datei mit Syntaxhervorhebung!
Ok, das Finden der entsprechenden CSS-Auswahl im Bedienfeld Elemente ist cool, aber was ist mit den CSS-Eigenschaften??
In der Abbildung unten sehen Sie die Quellen Das Panel hat die CSS-Eigenschaft hervorgehoben, an der ich interessiert war Klicken Sie auf den Befehl auf dem Grundstück aus dem Elemente Panel. Die Tatsache, dass es mich zu der Zeile geführt hat, in der der Wert definiert wurde (und nicht in der Zeile: property: $ value;), ist sehr mächtig!
Hinweis: Das Navigieren zu einer CSS-Eigenschaft im Quellenbedienfeld, wenn Sie auf die Eigenschaft im Bedienfeld Elemente klicken, ist nicht spezifisch für Sass. Sie kann auch mit normalem CSS erreicht werden.
Die Bearbeitung einer Sass-Datei unterscheidet sich nicht wesentlich von der Bearbeitung einer regulären CSS-Datei. Wir müssen jedoch sicherstellen, dass DevTools weiß, wo die SSS-Datei liegt .scss Die Datei befindet sich auf dem Dateisystem. Aus dem Quellen In der linken Seitenleiste sollte a Quellen Bereich, der die anzeigt .scss Klicken Sie mit der rechten Maustaste darauf und wählen Sie Speichern als, dann das vorhandene überschreiben .scss Quelldatei.
Weil wir geprüft habenCSS automatisch nach Sass speichern'und weil Sass im Terminal mit läuft sehen flag, Änderungen werden ziemlich schnell vorgenommen und die DevTools können uns diese Änderungen anzeigen.
Sogar Mixins funktionieren wie erwartet und fügen die folgenden in fast leerem ein .scss Datei innerhalb der Quellen Im Panel wird das richtige CSS generiert, das DevTools innerhalb einer Sekunde neu laden kann.
@mixin button border: 2px durchgehend grün; Anzeige: Inline-Block; Polsterung: 10px; Grenzradius: 4px; .box @include-Schaltfläche;
Wie Sie auf dem Bild oben sehen können, zeigt die linke Seite die .scss Quelldatei, an der wir Änderungen vornehmen würden, zeigt die rechte Seite die generierte Datei .css Datei, von der DevTools Änderungen übernommen hat (fast sofort dank der sehen Flagge im Terminal)
Paul Irish hielt einen großartigen Vortrag bei Fluent, der viele saftige Informationen zu den Chrome DevTools enthielt, aber auch die Verwendung von Sass. Weiter zu halb 6 für die Sass-Informationen.
Gehen wir einige der wichtigsten Punkte durch, die in diesem Tutorial besprochen wurden:
.scss Datei, zukünftige Speichern (Befehl + S) sollte die Datei überschreiben.Wie Sie sehen, ist der Entwicklungsworkflow mit Sass nicht perfekt, aber es ist definitiv viel besser als das, was es früher war. Mit der Zeit wird DevTools einen rationalisierten Workflow für die Bearbeitung von CSS-Dateien bereitstellen und Fehler werden behoben! Alle Probleme, die Sie finden, können auf crbug.com als Fehler ausgegeben werden.
Vielen Dank, dass Sie diesen Artikel gelesen haben!
Was hast du gelernt? Weitere Informationen zu Chrome DevTools!
