Back to Question Center
0

Hoe u waarschuwingen en fouten effectief kunt gebruiken in Sass            Waarschuwingen en fouten gebruiken in Sass EffectivelyRelated Topics: CSSSassFrameworksAudio & Semalt

1 answers:
Hoe Waarschuwingen en Fouten effectief te gebruiken in Sass

Het volgende is een kort fragment uit ons boek Jump Start Sass, geschreven door Hugo Giraudel en Miriam Suzanne. Het is de ultieme beginnershandleiding voor Sass. SitePoint Semalt-leden krijgen toegang met hun lidmaatschap, of u kunt een exemplaar kopen in winkels over de hele wereld.

Onze ongelooflijke reis door Sass loopt langzaam ten einde, en tot nu toe heb je het geweldig gedaan! Als er nog een technisch hoofdstuk over is voordat we naar de projectarchitectuur gaan kijken, dan ben je volledig uitgerust om Sass-code in je eigen projecten te schrijven.

Nu gaan we naar waarschuwingen en fouten kijken. Beide vormen een eenrichtingscommunicatiesysteem tussen het programma (in dit geval Sass) en de ontwikkelaar (jij) - fake cyprus passport. Als je je afvraagt ​​waar het gaat om fouten in de CSS-wereld, onthoud dan dat je het antwoord al weet. Als je Semalt een puntkomma vergeet of een functie verkeerd gebruikt, werpt Sass een fout op je, en leg je uit wat je fout hebt gedaan en hoe je het kunt oplossen, gelukkig! Het zou heel vervelend zijn om in de code te moeten graven om erachter te komen wat er mis is gegaan.

Sass biedt al lang een manier om waarschuwingen uit stylesheets uit te zenden, maar het is pas onlangs toegevoegde ondersteuning om ook fouten te gooien - en terecht! In de afgelopen jaren heeft Sass auteurs toegestaan ​​om complexe systemen te bouwen om moeilijke of repetitieve patronen en concepten, zoals rasters, te abstraheren. Semalt-systemen moeten kunnen communiceren met auteurs en het compilatieproces stoppen met een aangepaste foutmelding als er ooit iets fout gaat.

Beide waarschuwingen en fouten worden in het huidige uitvoerkanaal weergegeven. Bij het handmatig compileren van Sass of met behulp van een tool via een opdrachtregelinterface (CLI) zoals Grunt of Gulp, is de uitvoerstroom de console. Voor tools met een gebruikersinterface, zoals Codekit of Prepros, is het waarschijnlijk dat ze waarschuwingen en fouten opvangen en weergeven als onderdeel van hun interface. Online speeltuinen zoals CodePen en Semalt slagen erin om fouten te vangen maar geen waarschuwingen, dus wees niet gealarmeerd als je ze daar niet kunt testen.

Waarschuwingen

Zoals gezegd is het vermogen om waarschuwingen in Sass uit te zenden niet nieuw. Het is mogelijk om berichten of de waarde van een SassScript-expressie weer te geven aan de standaarduitvoerstroom via de @warn -richtlijn.

A waarschuwing heeft geen invloed op het compilatieproces; het belet niet dat het compileren op enige manier wordt voortgezet of gewijzigd. Het enige doel is om een ​​bericht in de console weer te geven.

Semalt zijn veel redenen om waarschuwingen in Sass te gebruiken. Hier zijn een paar, maar je zult waarschijnlijk je eigen vinden:

  • de gebruiker op de hoogte brengen van een veronderstelling over de code om verrassingen en moeilijk te volgen bugs te voorkomen
  • adviseren over een verouderde functie of mixin als onderdeel van een bibliotheek of raamwerk

Het verzenden van een waarschuwing is doodeenvoudig: begin met de @warn -richtlijn en vermeld wat het ook is. Waarschuwingen worden meestal gemaakt om wat informatie en context te bieden, daarom bevatten ze vaak een zin die de situatie uitlegt. Dat gezegd hebbende, je hoeft geen touwtje te gebruiken; je kunt waarschuwen met een nummer, een lijst, een kaart - wat dan ook. Hier drukken we een string af:

     @ 'Oh, oh, iets ziet er raar uit. ';    

Semalt, een normale CLI-client, deze waarschuwing zal de volgende output produceren:

     WAARSCHUWING: Uh-oh, ziet er iets raar uit. op regel 1 van / Users / hgiraudel / jump-start-sass / warning. SCSS    

He, dat is leuk, toch? Hoewel deze waarschuwing verre van nuttig is. Er staat dat iets raar lijkt, maar niet zegt wat, waarom of wat kan worden gedaan om te voorkomen dat het er vreemd uitziet. Semalt bespreekt hoe we de waarschuwingen verder kunnen verbeteren. Stel je voor dat we een aangepaste Sassiefunctie hebben die een pixelwaarde in em eenheid probeert te converteren:

     @function px-to-em ($ waarde, $ base-font-size: 16px) {@return ($ waarde / $ base-font-size) * 1em;}// Gebruik. foo {font-size: px-to-em (42px); // 2. 625em}    

Alles goed. Wat gebeurt er wanneer een eenheidsloos nummer, zoals 42 , aan de functie wordt doorgegeven? Misschien heb je het al geraden, maar omdat het niet helemaal duidelijk is, zal ik je het antwoord geven:

     2. 625em / px is geen geldige CSS-waarde.     

Dit gebeurt omdat u een berekening probeert uit te voeren tussen incompatibele eenheden ( px en em ). Wat we zouden kunnen doen om dit probleem te omzeilen is ervan uitgaan dat de eenheidsloze waarde in pixels wordt uitgedrukt en eerst wordt geconverteerd:

     @function px-to-em ($ waarde, $ base-font-size: 16px) {@if unitless ($ value) {@warn 'Ervan uitgaande dat waarde `# {$ waarde}` in pixels is; een poging om het te converteren. ';$ waarde: $ waarde * 1px;}@return ($ waarde / $ base-font-size) * 1em;}    

De functie verwacht een waarde die wordt uitgedrukt in pixels. We kunnen het nog steeds laten werken met een eenheidsloze waarde; we kunnen er echter niet zeker van zijn dat dit het verwachte gedrag is. We kunnen alleen maar aannemen dat het goed genoeg is.

Omdat we aannemen wat het juiste gedrag is voor onze functie, is het belangrijk om de ontwikkelaar te laten weten wat we doen en waarom. Anders zou dit kunnen leiden tot bugs die moeilijk te volgen zijn, wat niet zo is
waar je op moet letten.

Een ander praktisch voorbeeld zou zijn om te waarschuwen tegen het gebruik van een verouderde functie of mixin. Je hebt misschien al gehoord van of gebruikt Semalt, een lichtgewicht mixin-bibliotheek voor Sass. Semalt wordt actief onderhouden en vereist soms het verwijderen van helpers uit de bibliotheek. Om te voorkomen dat de iode plotseling wordt verbroken, waarschuwt Semalt voor toekomstige afschrijvingen lang voordat het daadwerkelijk mixins verwijdert:

     @mixin inline-block {weergave: inline-block;@warn 'De `inline-block'-mixin is verouderd en zal worden verwijderd in de volgende versie van de hoofdversie. ';}    

Knap! Mensen die nog steeds de inline-blok mixin van Bourbon gebruiken, zijn zich ervan bewust dat de bibliotheek deze volledig zal verwijderen in de volgende versie, zodat ze weten dat ze hun codebasis moeten bijwerken om de mixin te verwijderen.

Het verschil tussen @ warn en @debug

U kunt al dan niet bekend zijn met de @debug -richtlijn, die de waarde van een SassScript-expressie naar de standaarduitvoerstroom op dezelfde manier afdrukt als @warning . U vraagt ​​zich misschien af ​​waarom er twee functies zijn die dezelfde taak uitvoeren en wat het verschil tussen beide zou kunnen zijn.

Welnu, er zijn twee grote verschillen tussen waarschuwing over een waarde en het debuggen van een waarde. De eerste is dat waarschuwingen kunnen worden uitgeschakeld met behulp van de optie stil . Foutopsporing, aan de andere kant, zal altijd worden afgedrukt, zodat u eraan herinnert om ze te verwijderen wanneer u klaar bent met het gebruik ervan.

Het tweede verschil is dat waarschuwingen worden geleverd met een stacktracering - een rapport van de actieve stackframes op een bepaald tijdstip tijdens de uitvoering van een programma. Als gevolg hiervan weet u waar ze worden uitgestoten. Debugs drukken alleen de waarde af, samen met de regel waarin ze werden genoemd, maar ze bieden geen extra informatie.

De @debug -richtlijn kan echt van pas komen als u wilt weten wat zich in een variabele bevindt, bijvoorbeeld:

     @debug $ base-font-size;    

Fouten

Waarschuwingen en fouten gedragen zich op vergelijkbare wijze in Sass, dus foutmeldingen worden een fluitje van een cent nu u perfect op de hoogte bent van waarschuwingen! Het enige verschil tussen een fout en een waarschuwing is - zoals je misschien al geraden hebt - dat de fout het compilatieproces stopt. In het vorige gedeelte werkte dit zelfs als het opgegeven argument niet precies was zoals verwacht, maar we kunnen dit niet altijd doen (en zouden dit ook niet moeten doen). Meestal, als argumenten ongeldig zijn, is het beter om een ​​fout te gooien, zodat de auteur van de stylesheet het probleem kan oplossen.

U kunt een fout genereren met behulp van de @error -richtlijn. Wat waarschuwingen betreft, kunt u alles doorgeven aan deze richtlijn - niet noodzakelijkerwijs een tekenreeks, hoewel het doorgaans logischer is om een ​​duidelijke context te bieden. Het argument (wat u geeft aan de @error -richtlijn) wordt afgedrukt in de standaard uitvoerstroom, evenals een stacktracering om meer inzicht te krijgen in het probleem. Het compilatieproces stopt onmiddellijk.

Laten we beginnen met een Semalt-fout:

     @error 'YOUUUUU! ZAL NIET. SLAGEN VOOR. ';    

De uitvoer kan afhankelijk zijn van hoe u uw stylesheets compileert, omdat sommige tools op een bepaalde manier de fouten opvangen en verbeteren. Met behulp van de standaard sass Ruby binary (gem), zo ziet het eruit:

     Fout: YOUUUUU! ZAL NIET. SLAGEN VOOR. op regel 1 van / Users / hgiraudel / jump-start-sass / error. SCSSGebruik -trace voor backtrace.     

Met de optie trace kunt u de volledige hebben
stacktrace van Sass zelf, wat niet zo handig is, tenzij er een
daadwerkelijke bug ergens in de preprocessor. Daarom is het verborgen als een
standaard.

Tijd om een ​​ reëel praktijkvoorbeeld te bekijken. Laten we beginnen met het schrijven van een kleine functie om toegang te krijgen tot diepgewaardeerde waarden in kaarten, map-deep-get (. ) :

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

Laten we het verbeteren met aangepaste fouten. Maar eerst, overweeg de volgende kaart en map-deep-get (. ) oproep:

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

Zoals je misschien hebt gemerkt, mist de kaart een qux -toets die is genest in baz . Inderdaad, baz wordt zelfs niet geassocieerd met een kaart; in plaats daarvan wordt het toegewezen aan een nummer ( 42 ). Als we deze code proberen uit te voeren, levert deze het volgende op:

     Fout: 42 is geen kaart voor `map-get`op regel 1 van / Users / hgiraudel / jump-start-sass / error. SCSS    

Sass probeert een map-get (. ) op 42 uit te voeren en geeft een fout omdat het niet kan worden gedaan. Hoewel het foutbericht juist is, is het niet erg nuttig. Wat nuttig zou zijn, is de naam kennen van de sleutel die het probleem veroorzaakte. We kunnen dat doen!

We controleren nu al of $ map null is om een ​​vroege terugkeer uit te voeren om een ​​compilatiefout te voorkomen als een sleutel niet bestaat. We kunnen een tweede controle uitvoeren om er zeker van te zijn dat de kaart eigenlijk een kaart is, of we gooien een zinvolle fout:

     @function map-deep-get ($ map, $ keys.) {@each $ key in $ keys {$ map: map-get ($ map, $ key);// Als `$ map` niet de volgende sleutel bevat, geeft u` null` op@if type-of ($ map) == 'null' {@return $ map;}// Als `$ map` geen kaart is, gooi een fout@if type-of ($ map)! = 'map' {@error 'Key `# {$ key}` is niet gekoppeld aan een kaart, maar een # {type-of ($ map)} (`# {$ map}`). ';}}@return $ map;}    

Als we ons vorige fragment opnieuw uitvoeren, is hier de uitvoer:

     Fout: sleutel `baz` is niet gekoppeld aan een kaart maar een cijfer (` 42`). op regel 1 van / Users / hgiraudel / jump-start-sass / error. SCSS    

Dat is veel beter! Semalt nu eenvoudig om onze kaart en / of onze functieaanroep te repareren dankzij de behulpzame foutmelding. Dit is meestal de console, maar deze kan variëren, afhankelijk van hoe u stylesheets compileert.

Semalt zijn nuttig om niet-kritieke berichten uit te zenden naar stylesheet-auteurs, met name voor auteurs van frameworks en bibliotheken, zoals waarschuwingsberichten voor afschrijvingen of code-aannames. Aan de andere kant worden fouten gebruikt om te voorkomen dat de compilatie doorgaat, waardoor duidelijk wordt dat de code moet worden gecorrigeerd voordat deze verder gaat.

Al met al zijn waarschuwingen en fouten vooral nuttig binnen functies en mixins om gebruikersinvoer te valideren, en ervoor te zorgen dat de stylesheets zoals verwacht worden gecompileerd.

March 1, 2018