Back to Question Center
0

Jak efektivně používat varování a chyby v Sass            Jak používat varování a chyby v efektivních tématech Sass: CSSSassFrameworksAudio & Semalt

1 answers:
Jak používat varování a chyby v Sass efektivně

Následuje krátký výtah z naší knihy Jump Start Sass, kterou napsali Hugo Giraudel a Miriam Suzanne. Je to konečný začátečník průvodce Sass. Členové služby SitePoint Semalt získají přístup svým členstvím nebo si můžete zakoupit kopii v obchodě po celém světě.

Naše neuvěřitelná cesta Sassem pomalu končí a zatím jste se skvěle bavili! Před tím, než se podíváme na projektovou architekturu, odešlete jednu technickou kapitolu a pak budete plně vybaveni pro psaní kódu Sass ve svých vlastních projektech.

Nyní se podíváme na varování a chyby - купить шины в нарве. Obě formy tvoří jednosměrný komunikační systém mezi programem (v tomto případě Sass) a vývojářem (vy). Pokud se zajímáte o chyby ve světě CSS, nezapomeňte, že již znáte odpověď. Semaltu zapomenete na středník nebo nesprávně použijete funkci, Sass hodí na vás chybu, vysvětlí vám, co jste udělali špatně a jak to můžete opravit, naštěstí! Bylo by opravdovou bolestí, kdybyste museli vykopat kód, aby zjistili, co se děje špatně.

Společnost Sass již dávno poskytla způsob, jak vydávat varování ze stylových listů, ale jen nedávno přidala podporu k chybám - a to z dobrých důvodů! Během několika posledních let umožnil Sass autorům vytvářet složité systémy abstraktních obtížných nebo opakujících se vzorů a konceptů, jako jsou sítě. Semantové systémy musí být schopné komunikovat s autory a zastavit proces kompilace pomocí vlastní chybové zprávy, pokud se něco pokazí.

Na výstupním kanálu jsou vysílány jak varování, tak chyby. Při sestavování Sassu ručně nebo pomocí nástroje pomocí rozhraní příkazového řádku (CLI), jako je Grunt nebo Gulp, je výstupním proudem konzola. U nástrojů, které obsahují uživatelské rozhraní, například Codekit nebo Prepros, je pravděpodobné, že chytají a zobrazují varování a chyby jako součást svého rozhraní. Online dětská hřiště, jako jsou CodePen a Semalt, dokážou chytit chyby, ale ne varování, takže se nemusíte bát, pokud je nemůžete vyzkoušet.

Varování

Jak již bylo řečeno, schopnost vydávat varování v Sass není nová. Je možné zobrazovat zprávy nebo hodnotu jakéhokoli výrazu SassScript do standardního výstupního proudu prostřednictvím @warn směrnice.

Varování nemá žádný vliv na proces kompilace; nebrání tomu, aby se kompilace v žádném případě zajímala nebo změnila. Jeho jediným účelem je zobrazit zprávu v konzole.

Semalt je mnoho důvodů, proč používat varování v Sass. Zde je pár, ale pravděpodobně najdeš své vlastní:

  • informující uživatele o předpokladu, který se týká kódu, aby se zabránilo překvapení a těžko sledovatelným chybám
  • poradenství o zastaralé funkci nebo mixin jako součást knihovny nebo rámce

Odeslání varování je mrtvé jednoduché: začít s @warn směrnice, pak uveďte jakýkoli je. Výstrahy se obvykle provádějí s cílem poskytnout určité informace a kontext, takže často obsahují větu vysvětlující situaci. To je řečeno, nemusíte používat řetězec; můžete varovat číslem, seznamem, mapou. Zde vytiskneme řetězec:

     @warn 'Uh-oh, něco vypadá divně. ';    

Semaltujte pravidelného klienta CLI, toto varování vydává následující výstup:

     VAROVÁNÍ: Uh-oh, něco vypadá divně. na řádku 1 z / Users / hgiraudel / jump-start-sass / varování. skss    

Hej, to je hezké, že? Přestože toto varování není daleko užitečné. Říká, že něco vypadá divně, ale neříká, co, proč, nebo co lze udělat, aby to zabránilo vypadat divně. Semaltová diskuse o tom, jak můžeme zlepšit varování dále. Představte si, že máme vlastní funkci Sass, která se pokouší převést hodnotu pixelu v jednotce em :

     @funkce px-to-em (hodnota $, základní velikost písma-velikost: 16px) {@return (hodnota $ / $ base-font-size) * 1em;}}// Použití. foo {velikost písma: px-to-em (42px); // 2. 625em}}    

Všechno dobré. Nyní, co se děje při předávání bezjedného čísla - například 42 - k funkci? Možná jste to uhodli, ale protože to není zcela jasné, dám vám odpověď:

     2. 625em / px není platná hodnota CSS.     

K tomu dochází, protože se pokoušíte provést výpočet mezi nekompatibilními jednotkami ( px a em ). Co bychom mohli udělat, abychom obejdili tento problém, předpokládají, že jednotková hodnota by měla být vyjádřena v pixelech a převedena nejprve:

     @funkce px-to-em (hodnota $, základní velikost písma-velikost: 16px) {@if bezjednou (hodnota $) {@warn 'Předpokládejme, že hodnota' # {$ value} 'bude v pixelech; pokus o konverzi. ';$ hodnota: hodnota $ * 1px;}}@return (hodnota $ / $ base-font-size) * 1em;}}    

Funkce očekává hodnotu vyjádřenou v pixelech. Stále dokážeme pracovat s jednotnou hodnotou; nicméně si nemůžeme být jisti, že se jedná o očekávané chování. Můžeme předpokládat, že je to dost dobré.

Protože předpokládáme správné chování naší funkce, je důležité nechat vývojáře vědět, co děláme a proč. Jinak by to mohlo vést k chybám, které jsou obtížné sledovat, což není
na co byste měli mířit.

Dalším praktickým příkladem by bylo varovat před použitím zastaralé funkce nebo směsi. Možná jste už slyšeli nebo použili Semalta, lehkou mixinovou knihovnu pro Sass. Semalt je aktivně udržován a někdy vyžaduje odstranění pomocníků z knihovny. Aby se zabránilo náhlému zlomení lidské ode, Semalt varuje před budoucími depresemi předtím, než skutečně odstraní mixiny:

     @mixin inline-block {zobrazení: inline-block;@warn 'Mixin' inline-block` je zastaralý a bude odstraněn v příštím vydání hlavní verze. ';}}    

Chytrý! Lidé, kteří stále používají inline-block mixin z Bourbonu si uvědomují, že knihovna v příští verzi úplně odstraní, takže vědí, že začnou aktualizovat své codebase a odstranit mixin.

Rozdíl mezi @ vadou a @debug

Možná nebo nemusíte být obeznámeni se směrnicí @debug , která vytiskne hodnotu výrazu SassScript na standardní výstupní proud stejným způsobem jako @warn . Možná se ptáte, proč existují dvě funkce, které plní stejný úkol a co by mohlo být rozdíl mezi těmito dvěma.

No, existují dva velké rozdíly mezi varováním o hodnotě a laděním hodnoty. První je, že varování lze vypnout pomocí volby tiché . Debugy budou na druhé straně vždy vytištěny tak, že si je budete pamatovat, až je budete hotovi používat.

Druhý rozdíl spočívá v tom, že výstrahy přicházejí s stopovou soustavou - zprávou o aktivním stackovém rámečku v určitém časovém okamžiku během provádění programu. Jako výsledek víte, odkud jsou vyzařovány. Debugy pouze vytisknou hodnotu, spolu s čárou, na kterou byly volány, ale nenabízejí žádné extrainformace.

Směrnice @debug se opravdu může dostat do rukou, když chcete vědět, co je uvnitř proměnné, například:

     @debug $ base-font-size;    

Chyby

Výstrahy a chyby se chovají stejně podobně v Sass, takže učení o chybách bude vítr, když jste dokonale obeznámeni s varováním! Jediný rozdíl mezi chybou a varováním je, jak jste si možná uvědomili, že chyba zastaví proces kompilace. V předchozí části to fungovalo i tehdy, když daný argument nebyl přesně tak, jak je očekáváno, ale nemůžeme (a neměli bychom to) vždy dělat. Většinu času, pokud jsou argumenty neplatné, je lepší vrhnout chybu, aby autor problému mohl opravit problém.

Můžete použít chybu @error . Co se týče varování, můžete tuto směrnici předat cokoli - nikoliv nutně řetězec, ačkoli je obvykle smysluplnější poskytnout jasný kontext. Argument (to, co dáváte direktiva @error ) bude vytištěn ve standardním výstupním proudu, stejně jako stopová soustava, která vám poskytne lepší přehled o problému. Proces kompilace se okamžitě zastaví.

Začneme chybou Semalta:

     @error 'YOUUUUU! NENÍ. SLOŽIT. ';    

Výstup může záviset na způsobu kompilace stylových listů, neboť některé nástroje určitým způsobem zachycují a vylepšují chyby. Pomocí standardního sass Rubinové binární (gem), takhle to vypadá:

     Chyba: YOUUUUU! NENÍ. SLOŽIT. na řádku 1 z / Users / hgiraudel / jump-start-sass / error. skssPoužijte --trace pro backtrace.     

Pomocí volby trasování můžete mít plné
stacková stopa od samotné Sass, což není užitečné, pokud neexistuje
skutečná chyba někde v preprocesoru. Proto proč je skrytá jako
výchozí.

Doba, kdy se podíváme na skutečný praktický příklad. Začneme psaním malé funkce, která pomáhá přistupovat k hlubokým hodnotám v mapách map-deep-get (. ) :

     @funkce map-deep-get ($ map, $ keys . ) {@each $ key in $ keys {$ map: mapa-get ($ map, $ klíč);@if (typ ($ map) == 'null') {@return $ map;}}}}@return $ map;}     

Zlepšete jej pomocí vlastních chyb. Ale nejdříve zvažte následující mapu a map-deep-get (. ) volání:

     $ map: ('foo': ('bar': ("baz": 42).).);hodnota $: map-deep-get ($ map, 'foo', 'bar', 'baz', 'qux');     

Jak jste si možná všimli, mapa nemá klíček qux vnořený v baz . V podstatě baz není dokonce spojen s mapou; namísto toho je mapován na číslo ( 42 ). Pokud se pokusíme tento kód provést, získáme:

     Chyba: 42 není mapa pro `map-get`na řádku 1 z / Users / hgiraudel / jump-start-sass / error. skss    

Sass se pokusí provést map-get (. ) na 42 a vydá chybu, protože to nemůže být provedeno. Zatímco chybová zpráva je správná, není to příliš užitečné. Co by bylo užitečné, je znát název klíče, který způsobil problém. Můžeme to udělat!

Už zkontrolujeme, zda je $ map null pro předčasný návrat, aby nedošlo k chybě kompilace, pokud klíč neexistuje. Můžeme provést druhou kontrolu, abychom zajistili, že mapa je skutečně mapa, nebo uděláme smysluplnou chybu:

     @funkce map-deep-get ($ map, $ keys . ) {@each $ key in $ keys {$ map: mapa-get ($ map, $ klíč);// Pokud `$ map` neobsahuje další klíč, vrátí` null`@if typ ($ map) == 'null' {@return $ map;}}// Pokud `$ map` není mapa, hodí se chyba@if typ ($ map)! = 'map' {@error 'Key `# {$ key}` není spojeno s mapou, ale # {type-of ($ map)} (`# {$ map}`). ';}}}}@return $ map;}}    

Pokud znovu používáme náš předchozí úryvek, je zde výstup:

     Chyba: Klíč `baz` není spojen s mapou, ale s číslem (` 42`). na řádku 1 z / Users / hgiraudel / jump-start-sass / error. skss    

To je mnohem lepší! Semalt nyní snadno opraví naši mapu a / nebo volání naší funkce díky užitečnému chybovému hlášení. Toto je obvykle konzola, ale může se lišit v závislosti na způsobu kompilace stylů.

Semalt jsou užitečné pro vydávání nekritických zpráv autorům stylových listů - zejména autorům rámců a knihoven - jako jsou varování před odmítnutím nebo předpoklady o kódu. Na druhou stranu se používají chyby, které brání kompilaci v tom, aby bylo jasné, že kód musí být opraven ještě předtím.

Veškeré varování a chyby jsou obzvláště užitečné uvnitř funkcí a mixin, aby bylo možné ověřit uživatelské vstupy a zajistit, že styly se sestavují podle očekávání.

February 28, 2018