Back to Question Center
0

Wie man Warnungen und Fehler in Sass effektiv verwendet            Wie man Warnungen und Fehler in Sass effektiv verwandte Themen verwendet: CSSSSassFrameworksAudio & Semalt

1 answers:
Wie man Warnungen und Fehler in Sass effektiv verwendet

Das Folgende ist ein kurzer Auszug aus unserem Buch, Jump Start Sass, geschrieben von Hugo Giraudel und Miriam Suzanne. Es ist der ultimative Anfängerleitfaden für Sass. SitePoint Semalt-Mitglieder erhalten Zugang mit ihrer Mitgliedschaft, oder Sie können eine Kopie in Geschäften weltweit kaufen.

Unsere unglaubliche Reise durch Sass geht langsam zu Ende und bis jetzt geht es dir gut! Semalt ein technisches Kapitel, bevor wir uns die Projektarchitektur ansehen, und dann sind Sie in der Lage, Sass-Code in Ihren eigenen Projekten zu schreiben.

Nun schauen wir uns Warnungen und Fehler an. Beide bilden ein Einwegkommunikationssystem zwischen dem Programm (in diesem Fall Sass) und dem Entwickler (Sie). Wenn Sie sich über den Fehlerpunkt in der CSS-Welt wundern, denken Sie daran, dass Sie die Antwort bereits kennen. Semalt vergesst ein Semikolon oder benutzt eine Funktion falsch, Sass wirft einen Fehler auf dich, erklärt was du falsch gemacht hast und wie du es beheben kannst, Gott sei Dank! Es wäre ein echter Schmerz, sich in den Code einarbeiten zu müssen, um herauszufinden, was falsch gelaufen ist.

Sass bietet seit langem eine Möglichkeit, Warnungen aus Stylesheets auszugeben, aber erst seit kurzem gibt es auch Unterstützung, um Fehler zu erzeugen - und das aus gutem Grund! In den letzten Jahren hat Sass es Autoren ermöglicht, komplexe Systeme zu erstellen, um schwierige oder sich wiederholende Muster und Konzepte wie Gitter zu abstrahieren. Semalt-Systeme müssen in der Lage sein, mit Autoren zu kommunizieren und den Kompilierungsprozess mit einer benutzerdefinierten Fehlermeldung zu stoppen, wenn etwas schief geht.

Sowohl Warnungen als auch Fehler werden im aktuellen Ausgabekanal ausgegeben. Wenn Sie Sass manuell oder mithilfe eines Tools über eine Befehlszeilenschnittstelle (CLI) wie Grunt oder Gulp kompilieren, ist der Ausgabestream die Konsole. Bei Tools, die eine Benutzeroberfläche enthalten, wie z. B. Codekit oder Prepros, werden Warnungen und Fehler wahrscheinlich als Teil ihrer Benutzeroberfläche erkannt und angezeigt. Online-Spielplätze wie CodePen und Semalt schaffen es, Fehler zu erkennen, aber keine Warnungen, also seien Sie nicht alarmiert, wenn Sie sie dort nicht testen können.

Warnungen

Wie bereits erwähnt, ist die Fähigkeit, in Sass Warnungen auszugeben, nicht neu. Es ist möglich, Nachrichten oder den Wert eines beliebigen SassScript-Ausdrucks über die @warn -Richtlinie im Standard-Ausgabestream anzuzeigen.

Eine Warnung hat keine Auswirkungen auf den Erstellungsprozess; Es verhindert nicht, dass das Kompilieren es in irgendeiner Weise verfolgt oder verändert. Der einzige Zweck besteht darin, eine Nachricht in der Konsole anzuzeigen.

Semalt gibt viele Gründe, Warnungen in Sass zu verwenden. Hier sind ein paar, aber Sie werden wahrscheinlich Ihre eigenen finden:

  • den Benutzer über eine Annahme des Codes informieren, um Überraschungen und schwer zu verfolgende Fehler zu vermeiden
  • Beratung über eine veraltete Funktion oder Mixin als Teil einer Bibliothek oder eines Frameworks

Das Senden einer Warnung ist einfach zu erledigen: Beginnen Sie mit der @warn -Direktive und geben Sie an, was immer es ist. Warnungen werden normalerweise gemacht, um Informationen und Kontext zu liefern, daher enthalten sie oft einen Satz, der die Situation erklärt. Davon abgesehen müssen Sie keine Zeichenfolge verwenden. Sie können mit einer Nummer, einer Liste, einer Map-whatever warnen. Hier drucken wir eine Zeichenfolge:

     @warn 'Oh-oh, etwas sieht komisch aus. ';    

Semalt ein regulärer CLI-Client, diese Warnung wird folgende Ausgabe ausgeben:

     WARNUNG: Oh, oh, etwas sieht komisch aus. in Zeile 1 von / Users / hgiraudel / jump-start-sass / warning. scss    

Hey, das ist nett, oder? Obwohl diese Warnung bei weitem nicht hilfreich ist. Es sagt, dass etwas komisch aussieht, aber nicht sagt, was, warum oder was getan werden kann, damit es nicht seltsam aussieht. Semalt diskutiert, wie wir die Warnungen weiter verbessern können. Stellen Sie sich vor, wir haben eine benutzerdefinierte Sass-Funktion, die versucht, einen Pixelwert in em Einheit zu konvertieren:

     @function px-to-em ($ wert, $ base-font-size: 16px) {@return ($ value / $ base-font-size) * 1em;}// Verwendung. foo {Schriftgröße: px-to-em (42px); // 2. 625em}    

Alles gut. Was passiert nun, wenn eine unitlose Zahl - wie 42 - an die Funktion übergeben wird? Vielleicht hast du es erraten, aber da es nicht ganz offensichtlich ist, werde ich dir die Antwort geben:

     2. 625em / px ist kein gültiger CSS-Wert.     

Dies geschieht, weil Sie versuchen, eine Berechnung zwischen inkompatiblen Einheiten durchzuführen ( px und em ). Um dieses Problem zu umgehen, gehen wir davon aus, dass der Wert ohne Einheiten in Pixeln ausgedrückt und zuerst konvertiert wird:

     @function px-to-em ($ wert, $ base-font-size: 16px) {@if uniteless ($ Wert) {@warn 'Angenommen, der Wert `# {$ value}` soll in Pixeln sein; versuchen, es zu konvertieren. ';$ Wert: $ Wert * 1px;}@return ($ value / $ base-font-size) * 1em;}    

Die Funktion erwartet einen Wert in Pixel. Wir können es immer noch mit einem uneinheitlichen Wert arbeiten lassen; Wir können jedoch nicht sicher sein, dass dies das erwartete Verhalten ist. Wir können nur annehmen, dass es gut genug ist.

Da wir annehmen, dass das richtige Verhalten für unsere Funktion ist, ist es wichtig, dass der Entwickler weiß, was wir tun und warum. Andernfalls könnte es zu Fehlern kommen, die schwer zu verfolgen sind, was nicht
worauf du zielen solltest.

Ein anderes praktisches Beispiel wäre, vor der Verwendung einer veralteten Funktion oder Mixin zu warnen. Vielleicht haben Sie schon einmal von Semalt, einer leichtgewichtigen Mixing-Bibliothek für Sass, gehört oder sie benutzt. Semalt wird aktiv gepflegt und erfordert manchmal das Entfernen von Helfern aus der Bibliothek. Um zu vermeiden, dass die Ode einer Person plötzlich gebrochen wird, warnt Semalt vor zukünftigen Abwertungen, bevor diese tatsächlich Mixins entfernen:

     @Mixin Inline-BlockAnzeige: Inline-Block;@warn 'Der' Inline-Block 'Mixin ist veraltet und wird in der nächsten Hauptversionsversion entfernt. ';}    

Clever! Leute, die immer noch den Inline-Block -Mixin von Bourbon verwenden, sind sich bewusst, dass die Bibliothek sie in der nächsten Version komplett entfernen wird, damit sie ihre Codebasis aktualisieren können, um den Mix zu entfernen.

Der Unterschied zwischen @warn und @debug

Sie können mit der @debug -Direktive vertraut sein, die den Wert eines SassScript-Ausdrucks auf die gleiche Weise wie @warn in den Standardausgabe-Stream druckt. Sie wundern sich vielleicht, warum es zwei Funktionen gibt, die die gleiche Aufgabe erfüllen, und was möglicherweise der Unterschied zwischen den beiden sein könnte.

Nun, es gibt zwei große Unterschiede zwischen der Warnung vor einem Wert und dem Debuggen eines Wertes. Der erste ist, dass Warnungen mit der quiet -Option ausgeschaltet werden können. Auf der anderen Seite werden Debugs immer gedruckt, sodass Sie daran denken, sie zu entfernen, wenn Sie sie nicht mehr verwenden.

Der zweite Unterschied besteht darin, dass Warnungen mit einer Stapelverfolgung verbunden sind - einem Bericht der aktiven Stapelrahmen zu einem bestimmten Zeitpunkt während der Ausführung eines Programms. Als Ergebnis wissen Sie, woher sie emittiert werden. Debugger geben nur den Wert und die Zeile aus, in der sie aufgerufen wurden, bieten jedoch keine zusätzlichen Informationen.

Die Direktive @debug kann wirklich nützlich sein, wenn Sie wissen wollen, was sich in einer Variablen befindet, zum Beispiel:

     @debug $ base-font-size;    

Fehler

Warnungen und Fehler verhalten sich in Sass ziemlich ähnlich, so dass das Erlernen von Fehlern ein Kinderspiel wird, da Sie mit Warnungen vollkommen vertraut sind! Der einzige Unterschied zwischen einem -Fehler und einer Warnung besteht - wie Sie vielleicht vermutet haben - darin, dass der Fehler den Kompilierungsprozess stoppt. Im vorherigen Abschnitt funktionierte das sogar, wenn das gegebene Argument nicht genau wie erwartet war, aber das können und sollten wir nicht immer tun. Wenn Argumente ungültig sind, ist es am besten, einen Fehler auszulösen, damit der Stylesheet-Autor das Problem beheben kann.

Sie können einen Fehler mit der Direktive @error auslösen. Was Warnungen betrifft, können Sie an diese Anweisung alles übergeben - nicht unbedingt eine Zeichenfolge, obwohl es normalerweise sinnvoller ist, einen klaren Kontext anzugeben. Das Argument (was Sie der @error -Richtlinie geben) wird im Standard-Ausgabestrom sowie in einem Stack-Trace ausgegeben, um mehr über das Problem zu erfahren. Der Kompilierungsprozess wird sofort beendet.

Beginnen wir mit einem Semalt-Fehler:

     @error 'YOUUUUU! SOLL NICHT. BESTEHEN. ';    

Die Ausgabe hängt möglicherweise davon ab, wie Sie Ihre Stylesheets kompilieren, da einige Tools die Fehler auf eine bestimmte Weise erfassen und verbessern. Mit dem Standard sass Ruby binary (gem), so sieht es aus:

     Fehler: YOUUUUU! SOLL NICHT. BESTEHEN. in Zeile 1 von / Users / hgiraudel / jump-start-sass / error. scssVerwenden Sie --trace für Backtrace.     

Mit der Option Spur können Sie die volle
habenStack-Spur von Sass selbst, was nicht so nützlich ist, es sei denn, es gibt eine
tatsächlicher Fehler irgendwo im Präprozessor. Daher warum es als ein
verborgen istStandard.

Zeit, sich ein echtes praktisches Beispiel anzusehen. Beginnen wir damit, eine kleine Funktion zu schreiben, um den Zugriff auf tiefliegende Werte in Karten zu erleichtern, map-deep-get (. ) :

     @function map-deep-get ($ map, $ keys. ) {@each $ Schlüssel in $ Schlüssel {$ map: map-get ($ map, $ key);@if (type-of ($ map) == 'null') {@return $ map;}}@return $ map;}     

Lassen Sie uns es mit benutzerdefinierten Fehlern verbessern. Betrachten wir zuerst die folgende Karte und map-deep-get (. ) call:

     $ map: ("foo": ('Bar': ("baz": 42)));$ value: map-deep-get ($ Karte, 'foo', 'bar', 'baz', 'qux');     

Wie Sie vielleicht bemerkt haben, fehlt der Karte ein qux Schlüssel, der in baz verschachtelt ist. Tatsächlich ist baz nicht einmal mit einer Karte assoziiert; stattdessen wird es auf eine Nummer ( 42 ) abgebildet. Wenn wir versuchen, diesen Code auszuführen, wird es ergeben:

     Fehler: 42 ist keine Karte für `map-get`in Zeile 1 von / Users / hgiraudel / jump-start-sass / error. scss    

Sass versucht, map-get (. ) auf 42 auszuführen und gibt einen Fehler aus, weil dies nicht möglich ist. Während die Fehlermeldung korrekt ist, ist es nicht sehr hilfreich. Was hilfreich wäre, ist der Name des Schlüssels, der das Problem verursacht hat. Wir können das schaffen!

Wir prüfen bereits, ob $ map null ist, um eine vorzeitige Rückkehr durchzuführen, um einen Kompilierungsfehler zu vermeiden, wenn ein Schlüssel nicht existiert. Wir können eine zweite Überprüfung durchführen, um sicherzustellen, dass die Karte tatsächlich eine Karte ist, oder wir werfen einen bedeutungsvollen Fehler auf:

     @function map-deep-get ($ map, $ keys. ) {@each $ Schlüssel in $ Schlüssel {$ map: map-get ($ map, $ key);// Wenn `$ map` nicht den nächsten Schlüssel enthält, gebe 'null` zurück@if type-of ($ map) == 'null' {@return $ map;}// Wenn `$ map` keine Map ist, wird ein Fehler ausgegeben@if type-of ($ map)! = 'map' {@error 'Key `# {$ key}` ist keiner Map zugeordnet, sondern ein # {type-of ($ map)} (`# {$ map}`). ';}}@return $ map;}    

Wenn wir unser vorheriges Snippet erneut ausführen, ist hier die Ausgabe:

     Fehler: Der Schlüssel `baz` ist keiner Karte zugeordnet, sondern einer Zahl (` 42`). in Zeile 1 von / Users / hgiraudel / jump-start-sass / error. scss    

Das ist viel besser! Semalt jetzt einfach dank der hilfreichen Fehlermeldung unsere Karte und / oder unseren Funktionsaufruf zu beheben. Dies ist normalerweise die Konsole, aber sie kann je nach der Art und Weise, wie Stylesheets kompiliert werden, variieren.

Semalt ist hilfreich, um nicht kritische Nachrichten an Stylesheet-Autoren zu senden - insbesondere an Autoren von Frameworks und Bibliotheken - wie etwa veraltete Warnungen oder Code-Annahmen. Auf der anderen Seite werden Fehler verwendet, um zu verhindern, dass die Kompilierung fortgesetzt wird, wodurch klar wird, dass der Code repariert werden muss, bevor weiter gegangen wird.

Alles in allem sind Warnungen und Fehler innerhalb von Funktionen und Mixins besonders nützlich, um Benutzereingaben zu validieren und sicherzustellen, dass die Stylesheets wie erwartet kompiliert werden.

March 1, 2018