Back to Question Center
0

Hur man använder varningar och fel i Sass effektivt            Hur man använder varningar och fel i Sass EffectivelyRelated Topics: CSSSassFrameworksAudio & Semalt

1 answers:
Hur man använder varningar och fel i Sass effektivt

Följande är ett kortfattat utdrag ur vår bok, Jump Start Sass, skriven av Hugo Giraudel och Miriam Suzanne. Det är den ultimata nybörjarens guide till Sass. SitePoint Semalt medlemmar får tillgång till sitt medlemskap, eller du kan köpa en kopia i butiker över hela världen.

Vår otroliga resa genom Sass slutar långsamt och hittills har du gjort bra! Semalt ett tekniskt kapitel kvar innan vi tittar på projektarkitekturen, och då är du fullt utrustad att skriva Sass-kod i dina egna projekt.

Nu ska vi titta på varningar och fel - peter meiler weiden. Båda utgör ett envägskommunikationssystem mellan programmet (i det här fallet Sass) och utvecklaren (du). Om du undrar om felpunkten i CSS-världen, kom ihåg att du redan vet svaret. Semalt du glömde en semikolon eller använder en funktion felaktigt, Sass kastar ett fel på dig, förklarar vad du har gjort fel och hur du kan fixa det, tack och lov! Det skulle vara en verklig smärta att behöva gräva in i koden för att ta reda på vad som har gått fel.

Sass har länge lämnat ett sätt att avge varningar från stylesheets, men det har bara nyligen lagts till stöd för att kasta fel också - och med god anledning! Under de senaste åren har Sass tillåtit författare att bygga komplexa system för att abstrakta svåra eller repetitiva mönster och koncept, såsom grids. Semalt system måste kunna kommunicera med författare, stoppa kompileringsprocessen med ett anpassat felmeddelande om någonting någonsin går fel.

Både varningar och fel utmatas i den nuvarande utgångskanalen. När du sammanställer Sass för hand eller genom att använda ett verktyg via ett kommandoradsgränssnitt (CLI) som Grunt eller Gulp, är utmatningsströmmen konsolen. För verktyg som innehåller ett användargränssnitt, till exempel Kodkod eller Prepros, är det troligt att de fånga och visa varningar och fel som en del av deras gränssnitt. Online lekplatser som CodePen och Semalt lyckas fånga fel men inte varningar, så var inte orolig om du inte kan testa dem där inne.

Varningar

Som sagt har förmågan att avge varningar i Sass inte ny. Det är möjligt att visa meddelanden eller värdet av något SassScript-uttryck till standardutflödet genom @warn direktivet.

En varning har ingen inverkan på samlingsprocessen. det hindrar inte sammanställning att förfölja eller ändra på något sätt. Dess enda syfte är att visa ett meddelande i konsolen.

Semalt är många skäl att använda varningar i Sass. Här är ett par, men du kommer sannolikt att hitta din egen:

  • informerar användaren om ett antagande om koden för att undvika överraskning och svåra att spåra buggar
  • rådgivning om en avvecklad funktion eller mixin som en del av ett bibliotek eller ramverk

Att skicka en varning är död enkel att göra: Börja med @warn direktivet och ange vad som helst. Varningar görs vanligtvis för att ge viss information och sammanhang, så de innehåller ofta en mening som förklarar situationen. Det sägs att du inte behöver använda en sträng; du kan varna med ett nummer, en lista, en karta-vad som helst. Här skriver vi ut en sträng:

     @warn 'Uh-oh, något ser konstigt ut. ';    

Semalt en vanlig CLI-klient, kommer denna varning att avge följande utdata:

     VARNING: Oj, något ser konstigt ut. på rad 1 av / Användare / hgiraudel / jump-start-sass / varning. SCSS    

Hej, det är trevligt, eller hur? Även om denna varning är långt ifrån hjälpsam. Det står att något ser konstigt ut men säger inte vad, varför eller vad som kan göras för att stoppa det från att se konstigt ut. Semalt diskutera hur vi kan förbättra på varningar längre fram. Föreställ dig att vi har en Sass-anpassad funktion som försöker konvertera ett pixelvärde i em enhet:

     @funktion px-till-em ($ värde, $ bas-font-storlek: 16px) {@return ($ värde / $ bas-font-storlek) * 1em;}// Användning. foo {typsnittstorlek: px-till-em (42px); // 2. 625em}    

Allt bra. Vad händer nu när man skickar ett enhälligt nummer - till exempel 42 - till funktionen? Kanske har du gissat det, men det är inte helt uppenbart att jag ger dig svaret:

     2. 625em / px är inte ett giltigt CSS-värde.     

Detta händer eftersom du försöker utföra en beräkning mellan inkompatibla enheter px och em ). Vad vi kan göra för att kringgå problemet är att det enhetlösa värdet uttrycks i pixlar och konvertera det först:

     @funktion px-till-em ($ värde, $ bas-font-storlek: 16px) {@if unitless ($ value) {@warn 'Antag värdet `# {$ value}` för att vara i pixlar; försöker konvertera den. ';$ värde: $ värde * 1px;}@return ($ värde / $ bas-font-storlek) * 1em;}    

Funktionen förväntar sig ett värde uttryckt i pixlar. Vi kan fortfarande få det att fungera med ett enhälligt värde; Vi kan dock inte vara säkra på att detta är det förväntade beteendet. Vi kan bara anta att det är tillräckligt bra.

Eftersom vi antar vad som är rätt beteende för vår funktion är det viktigt att låta utvecklaren veta vad vi gör och varför. Annars kan det leda till buggar som är svåra att spåra, vilket inte är
vad du ska sikta på.

Ett annat praktiskt exempel skulle vara att varna mot användningen av en avstängd funktion eller mixin. Du kanske redan har hört talas om eller använt Semalt, ett lättviktigt mixinbibliotek för Sass. Semalt är aktivt upprätthållet, och ibland behöver man ta bort hjälpare från biblioteket. För att undvika plötsligt att bryta en persons ode, varnar Semalt om framtida deprecations sätt innan det faktiskt tar bort mixins:

     @mixin inline-block {display: inline-block;@warn 'Inline-block'-mixin avlägsnas och kommer att tas bort i nästa stora versionsfrisättning. ';}    

smart! Människor som fortfarande använder inline-block mixin från Bourbon är medvetna om att biblioteket tar bort det helt i nästa version, så de vet att de börjar börja uppdatera sin kodbas för att ta bort mixin.

Skillnaden mellan @warn och @debug

Du kanske eller inte är bekant med direktivet @debug , som skriver ut värdet av ett SassScript-uttryck till standardutflödet på samma sätt som @warn . Du kanske undrar varför det finns två funktioner som utför samma uppgift, och vad kan eventuellt vara skillnaden mellan de två.

Det finns två stora skillnader mellan varning om ett värde och felsökning av ett värde. Den första är att varningar kan stängas av med tyst alternativ. Debuggar, å andra sidan, kommer alltid att skrivas ut så att du kommer ihåg att ta bort dem när du är färdig med att använda dem.

Den andra skillnaden är att varningar kommer med ett stapelspår -a rapport av de aktiva stapelramarna vid en viss tidpunkt under genomförandet av ett program. Som resultat vet du varifrån de skickas ut. Debuggar skriver bara ut thevalue, tillsammans med linjen de kallades in, men de erbjuder ingen extrainformation.

Direktivet @debug kan verkligen komma till nytta när du vill veta vad som finns inom en variabel, till exempel:

     @debug $ base-font-size;    

Fel

Varningar och fel beter sig på samma sätt i Sass, så att lära sig om fel kommer att bli en bris nu när du är perfekt familiarwith varningar! Den enda skillnaden mellan ett fel och en varning är - som du kanske har gissat - att felet stannar kompileringsprocessen. I det föregående avsnittet fungerade detta även när det givna argumentet inte var precis som förväntat, men vi kan inte (och borde inte) alltid göra det här. För det mesta, om argumenten är ogiltiga, är det bättre att kasta ett fel så att stilsortsförfattaren kan åtgärda problemet.

Du kan kasta ett fel med @error direktivet. När det gäller varningar kan du överföra någonting till detta direktiv - inte nödvändigtvis en sträng, även om det vanligtvis är mer meningsfullt att skapa ett tydligt sammanhang. Argumentet (vad du ger till @error -direktivet) kommer att skrivas ut i standardutmatningsströmmen, liksom ett stapelspår för att ge mer inblick i problemet. Samlingsprocessen slutar omedelbart.

Låt oss börja med ett Semalt fel:

     @error 'YOUUUUU! SKALL INTE. PASSERA. ';    

Utmatningen kan bero på hur du sammanställer dina stylesheets, eftersom vissa verktyg fångar och förbättrar felen på ett visst sätt. Använda standarden sass Ruby binär (pärla), här är hur det ser ut:

     Fel: YOUUUUU! SKALL INTE. PASSERA. på rad 1 av / Användare / hgiraudel / jump-start-sass / error. SCSSAnvänd - Trafik för backtrace.     

Med alternativet spår kan du få fullt
stack spår från Sass själv, vilket inte är så användbart om det inte finns en
verklig bugg någonstans i förprocessorn. Därför är den dold som en
standard.

Tid att ta en titt på ett verkligt praktiskt exempel. Låt oss börja med att skriva en liten funktion för att hjälpa till med att få tillgång till deeplynested värden i kartor, map-deep-get (.) :

     @funktionskarta-djupt-få ($ karta, $ nycklar . ) {@each $ key in $ keys {$ map: map-get ($ map, $ key);@if (typ av ($ map) == 'null') {@return $ map;}}@return $ map;}     

Låt oss förbättra det med anpassade fel. Men först överväga följande karta och map-deep-get (.) call:

     $ karta: ("foo": ("bar": ("baz": 42)));$ värde: map-deep-get ($ map, 'foo', 'bar', 'baz', 'qux');     

Som du kanske har märkt saknar kartan en qux nyckel inburen baz . Faktum är att baz inte ens är associerad med en karta; i stället är det kartlagt till ett nummer ( 42 ). Om vi ​​försöker att utföra denna kod kommer det att ge:

     Fel: 42 är inte en karta för `map-get`på rad 1 av / Användare / hgiraudel / jump-start-sass / error. SCSS    

Sass försöker utföra en map-get (.) 42 och avger ett fel eftersom det inte kan göras. Medan felmeddelandet är korrekt är det inte särskilt användbart. Det som är till hjälp är att känna till namnet på nyckeln som orsakade problemet. Vi kan göra det!

Vi ​​kontrollerar redan om $ map är null för att göra en tidig retur så att ett kompileringsfel undviks om en nyckel inte existerar. Vi kan göra en andra kontroll för att säkerställa att kartan faktiskt är en karta, eller vi gör ett meningsfullt fel:

     @funktionskarta-djupt-få ($ karta, $ nycklar . ) {@each $ key in $ keys {$ map: map-get ($ map, $ key);// Om `$ map` inte innehåller nästa tangent, returnera` null`@if typ av ($ map) == 'null' {@return $ map;}// Om `$ map` inte är en karta, kasta ett fel@if typ av ($ map)! = 'map' {@error "Key` # {$ key} `är inte associerad med en karta men en # {typ av ($ map)} (` # {$ map} `). ';}}@return $ map;}    

Om vi ​​kör vår tidigare kod igen, här är resultatet:

     Fel: Key `baz` är inte associerad med en karta men ett nummer (` 42`). på rad 1 av / Användare / hgiraudel / jump-start-sass / error. SCSS    

Det är mycket bättre! Semalt nu enkelt att fixa vår karta och / eller vårt funktionssamtal tack vare det hjälpsamma felmeddelandet. Det här är vanligtvis konsolen, men det kan variera beroende på hur man sammanställer stilark.

Semalt är till hjälp för att avge icke-kritiska meddelanden till stilsortsförfattare, särskilt för ramverk och biblioteksförfattare, såsom avskrivningsvarningar eller kodantaganden. Å andra sidan används fel för att förhindra att kompileringen fortsätter, vilket gör det klart att koden måste lösas innan den går vidare.

Totalt är varningar och fel särskilt användbara inom funktioner och mixins för att validera användarinmatning, vilket säkerställer att stilarken sammanställs som förväntat.

March 1, 2018