Ladění pomocí Less.js

Skutečnost, že Less.js léčit CSS jako druh programovacího jazyka nám dává možnost páchání syntaktických chyb, které používají pouze CSS jediné, čeho bychom dosáhli, je, že styl nevyjde pořádně, ale in Méně co by nás generovalo, že by nebyl vidět žádný styl.
Proto je velmi důležité mít nástroje, které nám umožňují vidět chyby ve vývojovém procesu, takže ztrácíme méně času hledáním ve velkých blocích kódu, což je to, co selže.
Kvůli přírodě od Less.js vývoj orientovaný na testy zatím není možný, proto to děláme ladit Mnohokrát, ne -li vždy, to musí být provedeno v prohlížeči, něco, co není příliš optimální, ale je to řešení, které máme po ruce.
1- Abychom mohli tento tutoriál provést, budeme potřebovat základní znalosti a pojmy CSS, protože i když je zaměřen na Méně stále musíme vědět, jak jsou styly postaveny a jak jsou použity alespoň základní vlastnosti, abychom mohli mít adekvátní odkaz, když vidíme možné chyby.
2- Musíme mít prostředí nakonfigurované k použití Méně, tj. složku s projektem staženou a dostupnou k použití.
3- Pokud použijeme Google Chrome budeme potřebovat styl webového serveru Apache protože tento prohlížeč pro zabezpečení blokuje místní požadavky Less, pokud toto nastavení nechceme, můžeme použít Firefox.
4- Konečně také potřebujeme textový editor, kam psát příklady, to může být Vznešený text nebo možná oba editory NotePad ++ mají schopnost začlenit pluginy, aby bylo možné zvýraznit syntaxi JavaScript a ze CSS. Kromě toho je důležité, abychom měli v našem systému oprávnění ukládat tyto soubory do zvoleného umístění.
Jednou z prvních možností, kterou máme, je tisk našich chyb kódu a syntaxe přímo v našem prostředí s knihovnou less.jsToho je ve vývojovém prostředí dosaženo spuštěním naší knihovny přímo na klientovi, v tomto případě v prohlížeči.
To je velmi důležité, protože když přímo kompilujeme tímto způsobem, když dojde k chybě méně negeneruje žádný styl, takže pokud dojde k selhání, uvidíme pouze naši strukturu HTML ale bez CSS. Chcete -li provést tento typ ladění, můžeme postupovat podle průvodce v následujícím kódu:

 Ladění s méně Js 

První věc, kterou vidíme, je, že zahrneme vlastní soubor s názvem style-error.less Tento soubor je ten, který bude obsahovat vlastní kód, do kterého budeme ladit, pak musíme definovat proměnnou nazvanou méně a přiřadit mu prvek env které zavoláme rozvoj, pak zahrneme naši knihovnu less.js a s touto proměnnou řekneme, co děláme méně že když dojde k chybě, hodí nám zprávu, pro kterou nemůže mimo jiné zkompilovat kód.
V našem archivu style-error.less vložíme následující chybný kód:

 h1 {barva: červená; velikost písma: 3em;

Jak jsme si všimli, musíme zavřít klíč na konci, samozřejmě analyticky tato chyba vypadá trochu jednoduše a hloupě, ale když máme stovky řádků, je velmi jisté, že v určitém okamžiku zapomeneme zavřít klíč. V okamžiku spuštění našeho dokumentu pak uvidíme, jak Méně vyvolá v prohlížeči chybu:

ZVĚTŠIT

Jak vidíme kompilátor v prohlížeči Méně Říká nám, že existuje něco, co nerozpozná a že jsme pravděpodobně na něco zapomněli, v tomto případě víme, že to byl klíč, který jsme nezavřeli.
Zde musíme udělat malou pauzu, již jsme zpočátku viděli, jak můžeme chyby získat MéněZatím však nevíme, co znamenají chyby, kterých se můžeme dopustit, proto definujeme ty nejdůležitější, abychom měli dostatečné důvody vědět, co budeme hledat a jaká možná řešení můžeme uplatnit.
FileErrorTato chyba se týká neúspěšného importu z jiného souboru, pokud si to v našich souborech pamatujeme méně můžeme použít návod @import zahrnout další soubory pro organizaci a rozšíření našich funkcí.
Chyba syntaxeK této chybě dochází, když nesprávně napíšeme příkaz nebo umístíme vlastnost nesprávným způsobem, například při deklarování vlastnosti mimo blok.
Na následujícím obrázku vidíme, jak vypadá chyba tohoto typu, dosáhneme toho následujícím kódem:

 červená barva; h1 {velikost písma: 3em; }

Kde můžeme jasně vidět, že majetek červená barva je mimo svou správnou pozici, podívejme se, jak to vypadá, když to spustíme v prohlížeči:

ZVĚTŠIT

ParseErrorByla to chyba, kterou jsme detonovali v počátečním příkladu, k tomu dochází, když zapomeneme umístit rovnátka nebo středníky tam, kde jsou potřeba.
NázevErrorK této chybě dochází, když voláme proměnnou nebo mixin který není definován nebo není k dispozici v prostředí tohoto souboru Méně.
Další věc, kterou musíme zdůraznit, je to Méně Pouze ověří, že syntaxe a názvy jsou správné, ale nebude ověřit, zda je náš obsah správný, například se podívejme na následující kód:

 h1 {barva: červená; velikost písma: 3em; šířka: červená; }

Výše uvedený kód bude kompilován bez problémů, i když jasně vidíme, že vlastnost šířka Musí mít měření velikosti a ne barvu, pokud provedeme totéž v našem prohlížeči, soubor se spustí a funguje:

ZVĚTŠIT

Musíme tedy být ostražití, protože tato technika není zcela neomylná a existují chyby, které nejsou detekovány.
Další z technik, které můžeme použít k výrobě a ladit našeho kódu jsou nástroje pro vývojáře prohlížečů, v současnosti hlavní prohlížeče jako např Chrome Y Firefox mají nástroje, které nám umožňují pochopit, jak HTML a jak se chová a tímto způsobem je můžeme použít k zobrazení našeho kódu Méně.
To nám dává vyšší úroveň ladit, zvláště když nemůžeme použít proměnnou env které jsme viděli v předchozí části, u tohoto typu ladění možná nemáme detekci předchozích chyb, ale můžeme detekovat problémy, jako jsou styly, které se překrývají nebo mají špatné vlastnosti, jak jsme viděli v předchozím příkladu, kde Méně nezjistil a šířka: červená; například.
Abychom ukázali tento způsob ladění, vytvoříme v našem souboru následující styl style-error.less:

 h1 {velikost písma: 3em; barva: rajče; } záhlaví {h1 {velikost písma: 2em; }} # content-footer {span {font-family: Times, serif; }}

Pak v našem souboru HTML kde nazýváme knihovny, by mělo být následující:

 Ladění méně Js © 2015 Solvetic 

Dalším krokem je spuštění našeho HTML v prohlížeči, kde bychom měli získat následující:

Nyní, abychom provedli odpovídající ladění, stačí kliknout pravým tlačítkem na některý z titulů a vyhledat možnost, která nám říká zkontrolovat prvekS tímto bude ladicí konzola prohlížeče zrušena.
Jakmile jsme tam, můžeme zkontrolovat náš druhý titul a uvidíme něco zajímavého, je zde vlastnost, která je přeškrtnuta, a to proto, že při překrývání je pro tento prvek odstraněna. Tím předvádíme, jak můžeme lokalizovat problémy a situace, které uniknou překladač Méně. Podívejme se tedy na následujícím obrázku, jak tato akce vypadá:

Pro první kroky v Méně S těmito nástroji zajisté získáme optimální vývojový zážitek a snížíme množství chyb opomenutím, které můžeme mít, protože když musíme napsat stovky řádků, může se něco pokazit.
Tím tento tutoriál ukončujeme, viděli jsme pár možností ladění pro Méně pomocí zdrojů, které již máme, tímto způsobem nemusíme stahovat další nástroje ani hledat externí dokumentaci třetích stran. Samozřejmě existují další nástroje a doplňky, které nám pomáhají splnit tyto typy požadavků, ale musíte trochu více prozkoumat a křivka učení bude větší, abyste dosáhli stejného cíle.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod