Back to Question Center
0

Sådan bruges advarsler og fejl i Sass effektivt            Sådan bruges advarsler og fejl i Sass EffectivelyRelated Topics: CSSSassFrameworksAudio & Semalt

1 answers:
Sådan bruger du advarsler og fejl i Sass effektivt

Følgende er et kort uddrag fra vores bog, Jump Start Sass, skrevet af Hugo Giraudel og Miriam Suzanne. Det er den ultimative begynder guide til Sass. SitePoint Semalt medlemmer får adgang med deres medlemskab, eller du kan købe en kopi i butikker over hele verden - казино онлайн бесдипозитный бонус.

Vores utrolige rejse gennem Sass bliver langsomt til ende, og indtil videre har du gjort det godt! Semalt et teknisk kapitel tilbage, før vi ser på projektarkitektur, og så er du fuldt rustet til at skrive Sass-kode i dine egne projekter.

Nu skal vi se på advarsler og fejl. Begge udgør et envejs kommunikationssystem mellem programmet (i dette tilfælde Sass) og udvikleren (dig). Hvis du undrer dig over fejlpunktet i CSS-verdenen, skal du huske at du allerede kender svaret. Semalt du glemmer et semikolon eller bruger en funktion forkert, Sass kaster en fejl på dig, forklarer hvad du har gjort forkert og hvordan du kan rette det, heldigvis! Det ville være en reel smerte at skulle grave ind i koden for at finde ud af, hvad der er gået galt.

Sass har længe givet en vej til at udstede advarsler fra stylesheets, men det er kun for nylig tilføjet support til at smide så godt og med god grund! I løbet af de sidste par år har Sass givet authors mulighed for at opbygge komplekse systemer til abstrakte vanskelige eller gentagne mønstre og koncepter, såsom grids. Semalsystemer skal kunne kommunikere med forfattere, stoppe kompileringsprocessen med en brugerdefineret fejlmeddelelse, hvis noget nogensinde går galt.

Både advarsler og fejl udsendes i den aktuelle udgangskanal. Når du samler Sass manuelt eller ved hjælp af et værktøj via en kommandolinjegrænseflade (CLI) som Grunt eller Gulp, er udgangsstrømmen konsollen. For værktøjer, der indeholder en brugergrænseflade, som f.eks. Codekit eller Prepros, er det sandsynligt, at de fanger og viser advarsler og fejl som en del af deres grænseflade. Online legepladser som CodePen og Semalt klarer at fange fejl, men ikke advarsler, så vær ikke foruroliget, hvis du ikke kan teste dem derinde.

Advarsler

Som det er blevet sagt, er evnen til at udsende advarsler i Sass ikke ny. Det er muligt at vise meddelelser eller værdien af ​​ethvert SassScript-udtryk til standard udgangsstrøm gennem @warn direktivet.

A advarsel har ingen indflydelse på kompileringsprocessen; det forhindrer ikke kompilering til at forfølge eller ændre det på nogen måde. Det eneste formål er at vise en besked i konsollen.

Semalt er mange grunde til at bruge advarsler i Sass. Her er et par, men du vil sandsynligvis finde din egen:

  • informerer brugeren om en antagelse om koden for at undgå overraskelse og svære bugs
  • rådgiver om en udskrevet funktion eller mixin som en del af et bibliotek eller en ramme

At sende en advarsel er let at gøre: Start med @warn direktivet, og angiv derefter hvad det er. Advarsler er normalt lavet til at give nogle oplysninger og kontekst, så de ofte indeholder en sætning, der forklarer situationen. Når det er sagt, behøver du ikke bruge en streng; du kan advare med et nummer, en liste, et kort-uanset. Her udskriver vi en streng:

     @warn 'Uh-oh, noget ser mærkeligt ud. ';    

Semalt en regelmæssig CLI-klient, vil denne advarsel udsende følgende output:

     ADVARSEL: Uh-oh, noget ser mærkeligt ud. på linje 1 af / Brugere / hgiraudel / jump-start-sass / advarsel. SCSS    

Hej, det er rart, ikke? Selv om denne advarsel er langt fra hjælpsom. Det siger at noget ser mærkeligt ud, men siger ikke hvad, hvorfor eller hvad der kan gøres for at stoppe det fra at se underligt ud. Semalt diskuterer, hvordan vi kan forbedre advarsler videre. Forestil dig, at vi har en Sass-brugerdefineret funktion, der forsøger at konvertere en pixelværdi i em enhed:

     @funktion px-til-em ($ værdi, $ base-font-størrelse: 16px) {@return ($ værdi / $ base-font-størrelse) * 1em;}// Anvendelse. foo {skrifttypestørrelse: px-til-em (42px); // 2. 625em}    

Alt godt. Hvad sker der nu, når der sendes et enhedsfrit nummer - som f.eks. 42 -til funktionen? Måske har du gættet det, men da det ikke er helt klart, giver jeg dig svaret:

     2. 625em / px er ikke en gyldig CSS-værdi.     

Dette sker, fordi du forsøger at udføre en beregning mellem inkompatible enheder px og em ). Hvad vi kunne gøre for at omgå dette problem, antages at den enhedsværdi udtrykkes i pixels og konvertere den først:

     @funktion px-til-em ($ værdi, $ base-font-størrelse: 16px) {@if unitless ($ value) {@warn 'Assuming value `# {$ value}` skal være i pixels; forsøger at konvertere det. ';$ værdi: $ værdi * 1px;}@return ($ værdi / $ base-font-størrelse) * 1em;}    

Funktionen forventer en værdi udtrykt i pixels. Vi kan stadig få det til at fungere med en enhedsløs værdi; Vi kan dog ikke være sikre på, at dette er den forventede adfærd. Vi kan kun antage, at det er godt nok.

Da vi antager, hvad der er den korrekte adfærd for vores funktion, er det vigtigt at lade udvikleren vide, hvad vi laver og hvorfor. Ellers kan det føre til fejl, der er svære at spore, hvilket ikke er
hvad skal du tilstræbe.

Et andet praktisk eksempel ville være at advare mod brugen af ​​en udskrevet funktion eller mixin. Du har måske allerede hørt om eller brugt Semalt, et letvægts mixin bibliotek til Sass. Semalt er aktivt vedligeholdt, og det kræver nogle gange at fjerne hjælpere fra biblioteket. For at undgå pludselig at bryde en persons ode, advarer Semalt om fremtidige deprecations måde før det rent faktisk fjerner mixins:

     @mixin inline-block {display: inline-block;@warn 'Inline-block'-mixin er forældet og vil blive fjernet i den næste større version. ';}    

smart! Folk, der stadig bruger inline-block mixin fra Bourbon, er klar over, at biblioteket vil fjerne det helt i den næste version, så de ved at begynde at opdatere deres kodebase for at fjerne mixin.

Forskellen mellem @warn og @debug

Du er muligvis ikke bekendt med @debug direktivet, som udskriver værdien af ​​et SassScript-udtryk til standard output stream på samme måde som @warn . Du kan måske undre sig over, hvorfor der er to funktioner, der udfører samme opgave, og hvad der muligvis kunne være forskellen mellem de to.

Der er to væsentlige forskelle mellem advarsel om en værdi og debugging af en værdi. Den første er, at advarsler kan slukkes ved hjælp af stille indstillingen. Debugs, derimod, vil altid blive udskrevet, så du kan huske at fjerne dem, når du er færdig med at bruge dem.

Den anden forskel er, at advarsler kommer med et stakspor -a rapport af de aktive stakrammer på et bestemt tidspunkt under udførelsen af ​​et program. Som resultat, ved du hvorfra de udsendes. Debugs udskriver kun thevalue sammen med linjen de blev kaldt ind, men de tilbyder ingen ekstrainformation.

Direktivet @debug kan virkelig komme i brug, når du vil vide, hvad der er inde i en variabel, for eksempel:

     @debug $ base-font-size;    

Fejl

Advarsler og fejl opfører sig forholdsvis ens i Sass, så at lære om fejl bliver en brise nu, da du er helt familiarwith advarsler! Den eneste forskel mellem en fejl og en advarsel er som du måske havde gættet - at fejlen stopper kompileringsprocessen. I det foregående afsnit fungerede dette selv, når det givne argument ikke var nøjagtigt som forventet, men vi kan ikke (og burde ikke) altid gøre dette. Det meste af tiden, hvis argumenterne er ugyldige, er det bedre at smide en fejl, så stilarkforfatteren kan løse problemet.

Du kan smide en fejl ved hjælp af @error direktivet. Hvad angår advarsler, kan du passere noget til dette direktiv - ikke nødvendigvis en streng, selv om det normalt giver større mening at skabe en klar sammenhæng. Argumentet (hvad du giver til @error direktivet) vil blive udskrevet i standard udgangsstrøm samt et stakspor for at give mere indsigt i problemet. Samlingsprocessen stopper straks.

Lad os starte med en Semalt fejl:

     @error 'YOUUUUU! SKAL IKKE. PASSERE. ';    

Outputen kan afhænge af, hvordan du sammensætter dine stylesheets, da nogle værktøjer fanger og forbedrer fejlene på en bestemt måde. Brug af standarden sass Ruby binær (perle), her er hvordan det ser ud:

     Fejl: YOUUUUU! SKAL IKKE. PASSERE. på linje 1 af / Brugere / hgiraudel / jump-start-sass / error. SCSSBrug - Trafik til backtrack.     

Med spor mulighed kan du få det fulde
Stak spor fra Sass selv, hvilket ikke er så nyttigt, medmindre der er en
aktuelle fejl et sted i forprocessoren. Derfor er det derfor skjult som en
Standard.

Tid til at se et rigtigt praktisk eksempel. Lad os begynde med at skrive en lille funktion for at hjælpe med at få adgang til deeplynested værdier i kort, map-deep-get (.) :

     @funktion map-deep-get ($ map, $ keys . ) {@ $ $ nøgle i $ nøgler {$ map: map-get ($ map, $ key);@if (type-af ($ map) == 'null') {@return $ map;}}@return $ map;}     

Lad os forbedre det med brugerdefinerede fejl. Men først overveje følgende kort og map-deep-get (.) call:

     $ map: ('foo': ('bar': ('baz': 42)));$ værdi: map-deep-get ($ map, 'foo', 'bar', 'baz', 'qux');     

Som du måske har bemærket mangler kortet en qux nøgle indlejret i baz . Faktisk er baz ikke engang forbundet med et kort; i stedet er det kortlagt til et tal ( 42 ). Hvis vi forsøger at udføre denne kode, vil den give:

     Fejl: 42 er ikke et kort for `map-get`på linje 1 af / Brugere / hgiraudel / jump-start-sass / error. SCSS    

Sass forsøger at udføre en map-get (.) 42 og udsender en fejl, fordi den ikke kan udføres. Mens fejlmeddelelsen er korrekt, er det ikke særlig nyttigt. Det ville være nyttigt at kende navnet på den nøgle, der forårsagede problemet. Vi kan gøre det!

Vi ​​kontrollerer allerede, om $ map er null for at udføre et tidligt tilbagevenden for at undgå en kompileringsfejl, hvis en nøgle ikke findes. Vi kan udføre en anden check for at sikre, at kortet faktisk er et kort, eller vi smider en meningsfuld fejl:

     @funktion map-deep-get ($ map, $ keys . ) {@ $ $ nøgle i $ nøgler {$ map: map-get ($ map, $ key);// Hvis `$ map` ikke indeholder den næste nøgle, returner du 'null`@if type-of ($ map) == 'null' {@return $ map;}// Hvis `$ map` ikke er et kort, skal du smide en fejl@if type-of ($ map)! = 'map' {@error 'Nøgle `# {$ key}` er ikke forbundet med et kort, men en # {type-of ($ map)} (`# {$ map}`). ';}}@return $ map;}    

Hvis vi kører vores tidligere kodestykke igen, her er output:

     Fejl: Nøglen `baz` er ikke forbundet med et kort, men et nummer (` 42`). på linje 1 af / Brugere / hgiraudel / jump-start-sass / error. SCSS    

Det er meget bedre! Semalt nu nemt at rette vores kort og / eller vores funktionsopkald takket være den nyttige fejlmeddelelse. Dette er normalt konsollen, men det kan variere afhængigt af måden man kompilerer stylesheets på.

Semalt er nyttigt at udstede ikke-kritiske meddelelser til stylesheetforfattere - især for rammebøger og biblioteksforfattere - såsom afskrivningsadvarsler eller kodeantagelser. På den anden side bruges der fejl for at forhindre compilationen i at forfølge, hvilket gør det klart, at koden skal rettes, inden den går videre.

Alt i alt er advarsler og fejl særligt nyttige inden for funktioner og mixiner for at validere brugerindgang, hvilket sikrer at stilarkene bliver samlet som forventet.

March 1, 2018