Derinimas naudojant „Less.js“

Tai, kad Mažiau.js gydyti CSS kaip tam tikra programavimo kalba suteikia mums galimybę padaryti sintaksės klaidų, kurios naudojamos tik CSS vienintelis dalykas, kurį mes gautume, yra tai, kad stilius būtų netinkamas, bet įvestas Mažiau mus generuotų tai, kad nebūtų matomas joks stilius.
Štai kodėl labai svarbu turėti įrankius, leidžiančius pamatyti kūrimo proceso klaidas, todėl gaištame mažiau laiko ieškodami didelių kodų blokų, o tai nepavyksta.
Dėl gamtos pateikė Less.js į bandymus orientuotas vystymasis dar neįmanomas, todėl tai daroma derinimas Daug kartų, jei ne visada, tai turi būti padaryta naršyklėje, o tai nėra labai optimalu, tačiau tai yra mūsų turimas sprendimas.
1- Norėdami atlikti šią pamoką, mums reikės pagrindinių žinių ir sąvokų CSS, nes nors ir yra sutelktas į Mažiau dar turime žinoti, kaip kuriami stiliai ir kaip naudojamos bent jau pagrindinės savybės, kad pamatę galimas klaidas galėtume turėti tinkamą nuorodą.
2- Turime turėti sukonfigūruotą naudoti aplinką Mažiau, tai yra aplankas, kuriame projektas yra atsisiųstas ir pasiekiamas naudoti.
3- Jei naudosime „Google Chrome“ mums reikės žiniatinklio serverio stiliaus Apache kadangi ši saugumo naršyklė blokuoja vietines „Less“ užklausas, jei nenorime šios sąrankos, galime naudoti „Firefox“.
4- Pagaliau mums taip pat reikia teksto rengyklės, kur parašyti pavyzdžius Aukščiausias tekstas o gal „NotePad ++“ abu redaktoriai turi galimybę įtraukti papildinius, kad galėtų paryškinti sintaksę „JavaScript“ ir iš CSS. Be to, svarbu, kad mūsų sistemoje būtų leidimai išsaugoti šiuos failus pasirinktoje vietoje.
Vienas iš pirmųjų variantų, kurį turime, yra atspausdinti savo kodo ir sintaksės klaidas tiesiogiai mūsų aplinkoje su biblioteka mažiau.jsTai pasiekiama kūrimo aplinkoje paleidžiant mūsų biblioteką tiesiogiai kliente, šiuo atveju naršyklėje.
Tai labai svarbu, nes kai mes tiesiogiai sudarome kompiliaciją, kai įvyksta klaida mažiau nesukuria jokio stiliaus, todėl, jei įvyks nesėkmė, matysime tik savo struktūrą HTML bet be CSS. Norėdami atlikti tokio tipo derinimą, galime vadovautis šiuo kodu:

 Derinimas naudojant mažiau Js 

Pirmas dalykas, kurį matome, yra tai, kad įtraukiame pasirinktinį failą pavadinimu stilius-klaida.ne Šiame faile bus tas pats kodas, kurį derinsime, tada turime apibrėžti kintamąjį, vadinamą mažiau ir priskirkite jam elementą env kurią mes vadinsime plėtrai, tada įtraukiame savo biblioteką mažiau.js ir naudodami šį kintamąjį mes pasakome mažiau kad kai įvyksta klaida, ji, be kita ko, meta mums pranešimą, kuriam negali sudaryti kodo.
Mūsų archyve stilius-klaida.ne įdėsime šį klaidingą kodą:

 h1 {spalva: raudona; šrifto dydis: 3em;

Kaip pastebėjome, pabaigoje turime uždaryti raktą, žinoma, analitiškai ši klaida atrodo šiek tiek paprasta ir kvaila, tačiau kai turime šimtus eilučių, labai tikėtina, kad tam tikru momentu pamirštame uždaryti raktą. Vykdydami savo dokumentą, pamatysime, kaip tai padaryti Mažiau pateikia mums klaidą naršyklėje:

DIDELIS

Kaip matome kompiliatorių naršyklėje Mažiau Jis mums sako, kad yra kažkas, ko ji neatpažįsta ir kad mes tikriausiai kažką pamiršome, šiuo atveju žinome, kad tai buvo raktas, kurio neuždarėme.
Čia turime padaryti nedidelę pauzę, iš pradžių jau matėme, kaip galime gauti klaidų MažiauTačiau mes dar nežinome, ką reiškia klaidos, kurias galime gauti, todėl apibrėžsime svarbiausias klaidas, kad galėtume turėti pakankamai pagrindo žinoti, ko ieškosime ir kokius galimus sprendimus galime taikyti.
„FileError“Ši klaida reiškia nepavykusį importavimą iš kito failo, jei tai atsimename savo failuose mažiau galime naudotis instrukcija @importas įtraukti kitus failus mūsų funkcijoms organizuoti ir išplėsti.
Sintaksės klaidaŠi klaida atsiranda, kai neteisingai rašome pareiškimą arba netinkamai įdedame nuosavybę, pavyzdžiui, kai deklaruojame nuosavybę už bloko ribų.
Šiame paveikslėlyje matome, kaip atrodo tokio tipo klaida, mes ją pasiekiame naudodami šį kodą:

 spalva: raudona; h1 {šrifto dydis: 3em; }

Kur mes galime aiškiai matyti, kad turtas spalva: raudona yra netinkamoje padėtyje, pažiūrėkime, kaip jis atrodo, jei jį paleisime naršyklėje:

DIDELIS

ParseErrorTai buvo klaida, kurią detonavome pradiniame pavyzdyje, tai atsitinka, kai pamirštame įdėti breketus ar kabliataškius ten, kur jų reikia.
NameErrorŠi klaida įvyksta, kai iškviečiame kintamąjį arba a maišyti kuris nėra apibrėžtas arba nepasiekiamas to failo aplinkoje Mažiau.
Kitas dalykas, kurį turime pabrėžti, yra tai Mažiau Jis tik patikrina, ar sintaksė ir pavadinimai yra teisingi, tačiau ji nepatvirtins, ar mūsų turinys yra teisingas, pavyzdžiui, pažiūrėkime šį kodą:

 h1 {spalva: raudona; šrifto dydis: 3em; plotis: raudonas; }

Aukščiau pateiktas kodas bus sudarytas be jokių problemų, nors aiškiai matome, kad nuosavybė pločio Jame turi būti matuojamas dydis, o ne spalva, jei tą patį vykdome savo naršyklėje, failas vykdomas ir veikia:

DIDELIS

Taigi turime būti budrūs, nes ši technika nėra visiškai neklystanti ir yra klaidų, kurių neaptinkama.
Kitas būdas, kurį galime panaudoti kurdami a derinimas mūsų kodo yra naršyklės kūrėjo įrankiai, šiuo metu pagrindinės naršyklės, tokios kaip „Chrome“ Y „Firefox“ turime įrankius, kurie leidžia mums suprasti, kaip HTML ir kaip jis elgiasi, ir tokiu būdu mes galime juos naudoti norėdami pamatyti savo kodą Mažiau.
Tai suteikia mums aukštesnį lygį derinimas, ypač kai negalime pasinaudoti kintamuoju env kaip matėme ankstesniame skyriuje, šio tipo derinimas gali aptikti ankstesnes klaidas, tačiau galime aptikti tokių problemų kaip stiliai, kurie sutampa arba turi netinkamų savybių, kaip matėme ankstesniame pavyzdyje Mažiau neaptiko a plotis: raudonas; pavyzdžiui.
Norėdami parodyti šį derinimo būdą, savo faile sukursime tokį stilių stilius-klaida.ne:

 h1 {šrifto dydis: 3em; spalva: pomidoras; } antraštė {h1 {font-size: 2em; }} # content-footer {span {font-family: Times, serif; }}

Tada mūsų faile HTML bibliotekos turėtų būti tokios:

 Derinimas mažiau Js © 2015 Solvetic 

Kitas žingsnis - paleisti mūsų HTML naršyklėje, kur turėtume gauti:

Dabar, norėdami atlikti atitinkamą derinimą, turime tiesiog dešiniuoju pelės mygtuku spustelėti bet kurį pavadinimą ir ieškoti parinkties, kuri mums sako Tikrinti elementą, tai panaikins naršyklės derinimo konsolę.
Nuvykę ten galime apžiūrėti savo antrąjį titulą ir pamatysime kažką įdomaus, yra ypatybė, kuri yra perbraukta ir todėl, kad sutampanti ji pašalinama tam elementui, taip parodome, kaip galime rasti problemų ir situacijų sudarytojas Mažiau. Toliau esančiame paveikslėlyje pažiūrėkime, kaip atrodo šis veiksmas:

Dėl pirmųjų žingsnių Mažiau Naudodamiesi šiomis priemonėmis mes tikrai įgysime optimalią kūrimo patirtį, sumažindami klaidų skaičių dėl to, kad galime praleisti, nes kai turime parašyti šimtus eilučių, kažkas gali negerai.
Baigę šį vadovėlį, pamatėme keletą derinimo parinkčių Mažiau naudojant išteklius, kuriuos jau turime, tokiu būdu mums nereikia atsisiųsti kitų įrankių ar ieškoti išorinių trečiųjų šalių dokumentų. Žinoma, yra ir kitų įrankių bei papildymų, padedančių mums įvykdyti tokio tipo reikalavimus, tačiau, norint pasiekti tą patį tikslą, turite šiek tiek daugiau ištirti ir mokymosi kreivė bus didesnė.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką