Less / Sass-Debugging in Chrome Dev Tools / Firebug

Wie Euch der Wartung zu tun auf CSS gebaut mit Less/Sass?

Eines der Dinge ich mag über die Dev-Tools/Firebug ist die Fähigkeit zu sehen, die Nummer der Zeile in einem css-styling. Ist es ein guter Weg, dies zu tun mit CSS-Präprozessoren andere als mit manuell zu durchsuchen .weniger/.scss-Datei finde ich den code ändern möchten?

InformationsquelleAutor der Frage Dave Stibrany | 2012-03-26

32

Chrome Developer Tools unterstützt nun Sass Debuggen von out-of-the-box.

Aktualisiert kartengrundlagen:

Frühere Versionen von inline-Kommentar im css, um eine Zitat zu den source-code (siehe unten how-to). neuere Versionen von sass (3.3+) und Chrom (31+) Verwendung von source maps:
1. Stellen Sie sicher, Sie haben Sass 3.3.x
2. Kompilieren von Sass mit der --sourcemap Flagge.
3. In Chrome/ium DevTools öffnen Sie Einstellungen und klicken Sie auf allgemein.
4. Schalten Sie "Enable CSS source maps".
Mehr info steht auf der Chrome dev tools blog:
https://developers.google.com/chrome-developer-tools/docs/css-preprocessors

Ältere Versionen:

1. Zunächst sollten Sie zusammenstellen, Sass mit --debug-info eingeschaltet.

2. In Chrome/ium gehen Sie zu about:flags

3. Aktivieren der Entwickler-Werkzeuge Experimente

4. In Ihren "Informationen" (F12), öffnen Sie "Einstellungen", dann gehen Sie zu den "Experimenten" - tab
der Haken bei "Unterstützung für SASS".

InformationsquelleAutor der Antwort tsi
28

Wenn Sie eine Wahl, die Sie verwenden sollten, dieser Artikel auf css-tricks könnte für Sie von Interesse sein.

Ich bin gekommen, um zu erleben, dass mit WENIGER oder SASS hat mehr Vorteile als Nachteile. Obwohl dies ist sicherlich ein Nachteil, kann ich nur empfehlen, strukturieren Sie Ihre Dateien auch so alle styles, die Sie suchen, sind leicht zu finden mit anderen Referenzen hier sind ein paar Dinge, die Sie tun können:
- Dokument Bereiche Ihres stylesheet; ie /* General *//* Header */ und /* Footer */
- Verwendung von logischen und sinnvollen Namen für Klassen können Sie erkennen schnell (und keine Zahl Sie wie error1-error10 oder so)
- Lernen Sie sezieren die Klasse/element/id-Selektoren und darüber nachdenken, wie/wo würden Sie Sie geschrieben haben.
- Verwenden Sie STRG+Foft die genaue Attribut oder einer in der Nähe ist es ziemlich leicht so gefunden
SASS

Gibt es jetzt eine Möglichkeit zum Debuggen SASS in firefox eine Erweiterung, liest und zeigt die sass-Dateien in der firebug-Inspektor. Um zu verwenden, installieren Sie die Erweiterung aktivieren und die entsprechenden debug-flags.

https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/

Edit: wie der 2014-07-06, dieses plugin wird nicht mehr zum download verfügbar. FireSass wurde eingestellt.

Chrome/Webkit-Versionen wurden aufspringen rund um die net und es gibt ein beta-feature in chrome hinzufügen von Unterstützung für SASS-debugging. Es basiert auf den gleichen debugging-Informationen in der verwendeten firefox-version. Noch nicht in der Lage zu beurteilen, alle von Ihnen richtig, als der noch, noch etwas gefunden, was öffentlich akzeptiert, als das plugin für den job schreiben.

WENIGER /STYLUS

Als dieser tweet @jaketrent Punkte zu erklären, es ist ein Fortschritt auf der debugging-Seite in chrome, aber nichts gebacken und in noch und da der Staat WENIGER github könnte es noch eine Weile dauern... Beide Lösungen basieren auf der beta-Funktion für SASS debugging-Unterstützung in chrome, im Grunde hinzufügen die gleichen debug-Informationen wie SASS macht.
- https://github.com/cloudhead/less.js/pull/1038
- https://github.com/LearnBoost/stylus/pull/886
InformationsquelleAutor der Antwort sg3s
1

Ich habe nur selten Probleme mit der Wartung/debugging in WENIGER -- wir immer auf dem server kompiliert Ende und nur als Verweis auf die CSS-Datei in die HTML-Seite. Das macht es so es gibt immer eine eins-zu-eins-Korrespondenz mit der Webseite und eine Datei auf der Festplatte.

Und dann wenn ich Sie Bearbeiten die WENIGER-Datei, finde ich das WENIGER, da ziemlich viel CSS+extra-markup, es ist ganz einfach, backtrace alles, was ich bin verwirrt über den Ursprung Anweisung in der CSS. Wenn es ein mixin, es ist ziemlich offensichtlich (da ich in der Regel verwenden Mixins in Verbindung, um zu verhindern, dass zu tun, alle das vendor-Präfix-Zeug immer wieder), und dann ist es nur eine logische Hierarchie, da wir die Klasse nesting-Funktion, so einen zu finden:

div#awesome aside ul

ist so einfach wie das finden:
```
div#awesome{
    aside{
        ul{
            padding: 0;
        }
    }
}
```
(obwohl wir versuchen, nicht mehr als 3 Ebenen tief)

Habe ich keine wirkliche Erfahrung mit SASS, aber ich wusste nicht, wie weit entfernt von CSS war es, als ich die ersten sah es ein paar Jahre zurück (und wurde noch nicht wieder da...)

InformationsquelleAutor der Antwort tkone
1

Einige Tipps:
- Umfassen sowohl die .der sass RIGAIS und der .css-Dateien in der Versionskontrolle. Auf diese Weise hat jeder der aktuellsten änderungen.
- Wenn Sie organisieren Ihre stylesheets in logische Bereiche, die Wartung ist ein Kinderspiel.
- Auch: versuchen Sie, weniger als drei Hauptfarben, und verwenden Sie dann SASS, Farbe-Funktionen, die Sie ändern und speichern die Ergebnisse in der Variablen, die Sie wiederverwenden können während Ihres design/theme.
Ex:
$chartreuse: #7fff00
$olive: darken($chartreuse, 32%)

So, Sie pflegen nur noch eine Farbe. Und der rest wird neu berechnet.

Bis vor kurzem gab es keine in-browser-SASS-debugging-Werkzeuge.

Gibt es jetzt ein Firefox-plugin namens FireSASS (https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/)

In Ihrem sass --watch Befehl, fügen Sie ein -g für --debug-info so, dass es die Ausgabe der Haken benötigt für das plugin zu laufen.

InformationsquelleAutor der Antwort Benxamin
1

Wechselte ich von weniger, sass, weil firesass.
Damit erhalten Sie die original-sass-line-in firebug.

installieren firesass wenn Sie sass

InformationsquelleAutor der Antwort yvess

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.