Veiksmingas darbas su „LESS“ patarimais ir įrankiais

Mūsų ankstesnėje pamokoje mes išmokome, kaip naudoti LESS praktiniu būdu, naudojant tokias programas kaip ChrunchApp, kad sukompiliuotų kodą. Šį kartą mes atliksime keletą patogių patarimų, kurie padės padidinti mūsų našumą ir našumą, kai sudarysime LESS sintaksę. Mes nustatysime darbalaukio / darbo aplinką, įgalindami mūsų dabartinio redaktoriaus sintaksės paryškinimą, naudojant automatinius kompiliatoriaus įrankius ir naudojant iš anksto nustatytus „Mixins“, tada sinchronizuosime juos visus kartu.

Na, jei esate pasiruošę, pradėkime.

Atsakomybės apribojimas: Žemiau pateikiami patarimai yra gaunami iš mano kasdienės žiniatinklio dizainerio patirties. Taigi, prieš tai eidami toliau, noriu pabrėžti, kad patarimai gali būti pritaikyti kai kuriems dizaineriams, o ne kitiems; kaip ir bet kuris kitas patarimas internete. Nepaisant to, tikiuosi, kad galite gauti naudos iš šių patarimų.

1. Kodo žymeklis

Kaip jau minėjome, mes pristatėme jus į „ChrunchApp“. Tačiau ši programa gali būti ne kiekvienas žiniatinklio dizainerio pasirinkimas; kadangi kiekvienas dizaineris turi savo darbo aplinką, įskaitant pasirinktą kodų redaktorių.

Vietoj to, kad įdiegtumėte kitą kodų redaktorių, iš tikrųjų galite naudoti dabartinį kodą ir įjungti sintaksę. Taigi, šiame pranešime pasidalysiu keletu patarimų, kaip pridėti „LESS“ kodą, pabrėžiantį į 2 žinomus teksto redaktorius: Sublime Text 2 ir Užrašų knygelė++.

Sublime Text 2

Šis redaktorius šiuo metu yra mano pasirinktas pasirinkimas, kad galėčiau padėti kodams kurti. Ši programa yra prieinama „Windows“, „Linux“ ir „OSX“, taigi, nepriklausomai nuo jūsų OS, vis tiek galėsite sekti šį patarimą.

Dabar atsisiųskime jį iš savo oficialios svetainės ir išbandykite šį redaktorių. Tada perskaitykite toliau pateiktas instrukcijas, kad įjungtumėte LESS spalvą.

Pastaba: Prieš atsisiųsdami įsitikinkite, kad perskaitėte licenciją, nes nemokama versija skirta tik vertinimui.

Įdiekite paketo konsolę

Pirmiausia atidarykite „Sublime“ tekstą 2 ir pateikite šį meniu konsolę Rodyti> Rodyti konsolę

Tada nukopijuokite ir įklijuokite šią komandinę eilutę į konsolę, tada paspauskite „Enter“, kad įdiegtumėte paketo valdymą iš „wBond.net“:

importuoti urllib2, os; pf = "Paketo valdymo.sublimo paketas"; ipp = sublime.installed_packages_path (); os.makedirs (ipp), jei ne os.path.exists (ipp) dar nėra; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); atidarykite (os.path.join (ipp, pf), 'wb') .write (urllib2.urlopen ('http://sublime.wbond.net/'+pf.replace (",'% 20 ')). skaityti ()); spausdinti „Paleiskite Sublime Text“, kad užbaigtumėte diegimą

Tai Paketų konsolė padės mums įdiegti paryškinimo paketą.

„LESS“ paryškinimo paketo diegimas

Iš naujo paleiskite Sublime Text 2 ir parodykite komandų paletę iš šio meniu Įrankiai> Komandų paletė. Palaukite, kol paketas bus pakrautas. Tada įveskite Įdiekite paketą ieškoti ir įkelti paketų saugyklas.

Tada ieškokite LESS paketo iš saugyklos sąrašo ir paspauskite Enter.

Palaukite minutę, kol „Sublime Text 2“ galėsite atsisiųsti ir įdiegti paketą, kol būsenos juostoje pasirodys šis pranešimas.

Eikite į meniu Žiūrėti> Sintaksė, sąraše turėtumėte matyti mažiau. Tai reiškia, kad Sublime Text 2 palaiko .mažiau ir jūsų LESS sintaksė taip pat turėtų turėti tinkamą spalvų išryškinimą dabar.

Užrašų knygelė++

„Notepad ++“ yra laisvas, atviro kodo redaktorius ir turi daug naudingų papildinių, kad išplėstų jos funkcionalumą. Jis taip pat plačiai naudojamas daugeliui interneto dizainerių / kūrėjų, ypač tų, kurie dirba su „Windows“ operacine sistema. Taigi, aš taip pat nusprendžiu įtraukti patarimą, kad pridėtumėte LESS tekstą, pabrėžiant jį.

Įdiekite „LESS“ žymeklį „Notepad“++

„Notepad ++“ įgalina „LESS“ spalvų paryškinimą gana paprasta.

Iš šios nuorodos (userDefineLang_LESS.xml) pirmą kartą atsisiųskite „Notepad ++“ paketą „LESS“. Tada eikite į Peržiūrėti> Vartotojų nustatytas dialogas.

Bus rodomas toliau pateikiamas langas. Spustelėkite Importuoti ... mygtuką ir suraskite atsisiųstą .xml failą. Tada iš naujo paleiskite „Notepad“++.

Atidarykite savo .less failą ir eikite į kalbos meniu. Dabar turėtumėte pamatyti „LESS“. Pasirinkite ją, jei norite, kad spalvų paryškinimas būtų taikomas LESS sintaksėje.

Daugiau išteklių

Rinkoje yra daug kitų redaktorių. Taigi, čia pateikiame keletą naudingų nuorodų, jei nenaudojate nė vieno iš pirmiau minėtų redaktorių.

„Adobe DreamWeaver“

Be abejo, „Dreamweaver“ turi didžiulę vartotojų bazę. Jis galimas tiek „Mac“, tiek „Windows“. Taigi, jei naudojate šį redaktorių, čia yra vienas iš gerų šaltinių įdiegti „LESS“ paryškinimą „Adobe DreamWeaver“.

Coda

Jei naudojate „Mac“, tikriausiai žinote „Coda“, šis redaktorius yra vienas populiariausių „Mac“ vartotojų. Ir čia galite įdiegti „LESS“ „Coda“.

Geany

Tai vienas populiariausių „Linux“ naudotojų kodų redaktorių. Kai kurie kompiuteriai, esantys „Linux“ sistemoje, taip pat naudojasi „Geany“. Taigi, jei jį naudosite, galite įtraukti „LESS“ žymeklį, vadovaudamiesi šia instrukcija „SuperUser.com“

2. LESS Compiler

Skirtingai nuo „ChrunchApp“, turinčio įmontuotą „LESS“ kompiliatorių, kiti redaktoriai jo neturi. Nors yra keletas būdų, kaip ją įtraukti, tačiau jis yra gana techninis bendrųjų vartotojų atžvilgiu. Taigi geriausias sprendimas, kurį turiu surinkti, yra atlikti šiuos įrankius: WinLESS arba LESS.app. „WinLESS“ yra kompiliatorius, skirtas „Windows“, o „LESS.app“ sukurtas OSX.

Šie įrankiai gali konvertuoti mūsų LESS kodą į statinį CSS automatiškai, kai išsaugosime failą ir pranešime tiesiogiai, jei kode yra klaida. Na, leiskite man parodyti, kaip šis įrankis yra:

Pirma, norėčiau atsisiųsti „WinLESS“ ir ją įdiegti.

Spustelėkite mygtuką Pridėti aplanką ir suraskite katalogą, į kurį įdėjote .mažiau failai (manau, jūs jau sukūrėte bent vieną). Kai pridėsite vieną; WinLESS bus nuskaityti ir rasti viską .mažiau failai ir rodomi sąraše.

Eikite į meniu Failas> Nustatymas, ir įsitikinkite, kad šios parinktys yra patikrintos;

• Automatiškai kompiliuokite failus, kai jie išsaugomi
• Rodyti pranešimą apie sėkmingą kompiliavimą

Taip pat galime nustatyti išvesties aplanką, jei norime jį išsaugoti kitur. Tačiau šiame pavyzdyje mes paliksime šią parinktį taip; tai reiškia, kad išvesties failas bus išsaugotas tame pačiame kataloge kaip ir .mažiau failą.

Atidaryk savo .mažiau failą iš pridėto katalogo, atlikite keletą pakeitimų ir išsaugokite jį.

„WinLESS“ praneš apie jus, kai failas sėkmingai sukompiliuotas .css arba jei koduose yra klaida. Tokiu būdu galite tiesiogiai patikrinti „.css“ išvestį, o ne laukti, kol kodai bus užbaigti.

Jei naudojate „Mac“, galite naudoti „LESS.app“, kuris turi tą patį funkcionalumą kaip ir „WinLESS“.

Iš anksto nustatyti mišiniai

Dabartinėse modernaus interneto dizaino praktikose naudosime tokias CSS3 savybes kaip gradientas, šešėlis ar pasienio spindulys:

-webkit-border-radius: 3px; -moz-border-spindulys: 3px; pasienio spindulys: 3px;

arba

fonas: -moz-linijinis gradientas (viršuje, # f0f9ff 0%, # a1dbff 100%); fonas: -webkit-linijinis gradientas (viršuje, # f0f9ff 0%, # a1dbff 100%); fonas: -o-linijinis gradientas (viršuje, # f0f9ff 0%, # a1dbff 100%); fonas: -ms-linijinis gradientas (viršuje, # f0f9ff 0%, # a1dbff 100%); fonas: tiesinis gradientas (viršuje, # f0f9ff 0%, # a1dbff 100%);

Mūsų ankstesnėje pamokoje mes sukūrėme keletą Mixins, kad supaprastintume šią sintaksę. Laimei, kai kurie žiniatinklio dizaino bendruomenės žmonės yra pakankamai turtingi, kad galėtų išgelbėti savo laiką, kad sukompiliuotų šiuos naudingus „Mixins“, kad mums nereikėtų patys susikurti iš naujo.

Ir vienas iš mano mėgstamiausių yra mažiau elementų, kuriuose yra daug naudingų CSS3 nustatytų taisyklių. Taigi, dabar rašome mažiau kodų iš varginančių pardavėjų priešdėlių.

Dabar gerai, pažiūrėkime, kaip visi šie patarimai gali tikrai padėti.

Visų jų kūrimas

Šiame pavyzdyje ketinu sukurti paprastą nuorodos mygtuką. Pirmiausia norėčiau sukurti naują HTML dokumentą ir įdėti šį antkainį:

     Paspausk mane 

Sukurti styles.less kaip pagrindinį LESS stilių, išsaugokite jį tame pačiame aplanke su mūsų HTML dokumentu ir įtraukite aplanką į WinLESS.

Importuokite elements.less mes atsisiuntėme prieš naudodami šią sintaksę:

@import "elements.less";

Dabar mes galime naudoti bet kuriuos „Mixins“, pagamintus iš elementų .gradientas, .suapvalinta, ir .ribojasi. Aš tikiu, kad „Mixins“ vardas yra visiškai savaime suprantamas.

Toliau įdėkite žemiau esančias LESS taisykles savo stiliaus lape. Ir išsaugokite jį dar kartą

 a ekranas: inline-block; paminkštinimas: 10px 20px; spalva: # 555; teksto apdaila: nėra; .bw-gradientas (#eee, 240, 255); . .bordered; & hover .bw-gradientas (#eee, 255, 240);  

Nuo mūsų .mažiau failas buvo pridėtas prie „WinLESS“, jis bus automatiškai sukompiliuotas .css. Dabar pažiūrėkime rezultatus.

Na, tai ne taip blogai, ar ne, atsižvelgiant į tai, kad šis mygtukas buvo sukurtas mažiau linijų nei reikia. Ir čia yra tikrasis sukurtas statinis CSS:

 a ekranas: inline-block; paminkštinimas: 10px 20px; spalva: # 555; teksto apdaila: nėra; fonas: #eeeeee; fonas: -webkit-gradientas (linijinis, kairysis apačioje, kairysis viršuje, spalvų sustojimas (0, # f0f0f0), spalvų stabdymas (1, #ffffff)); fonas: -ms-linijinis gradientas (apačioje, # f0f0f0 0%, # f0f0f0 100%); fonas: -moz-linijinis gradientas (vidurinis apačia, # f0f0f0 0%, #ffffff 100%); -webkit-border-radius: 2px; -moz-border-spindulys: 2px; pasienio spindulys: 2px; -moz-fono klipas: paminkštinimas; -webkit-fono klipas: padding-box; fono klipas: paminkštinimo dėžutė; border-top: kietas 1px #eeeeee; sienos kairėje: kietas 1px #eeeeee; dešinė pusė: kietas 1px #eeeeee; apačioje: kietas 1px #eeeeee;  a: Pakimba fonas: #eeeeee; fonas: -webkit-gradientas (linijinis, kairysis apačioje, kairysis viršuje, spalvų sustojimas (0, #ffffff), spalvų stabdymas (1, # f0f0f0)); fonas: -ms-linijinis gradientas (apačioje, #ffffff 0%, #ffffff 100%); fonas: -moz-linijinis gradientas (vidurinis apačia, #ffffff 0%, # f0f0f0 100%); 

Apibendrinant

Čia pateikiama greita santrauka apie tai, ką aptarėme šiame pranešime:

• Įjungus sintaksės išraišką mūsų dabartiniame redaktoriuje, nereikia įdiegti papildomo redaktoriaus tik LESS sintaksės sudarymui; tai gali sutaupyti tam tikras vietas / atmintį jūsų diske.
• Mes taip pat nebereikės atsisiųsti ir susieti LESS.js bibliotekos su mūsų HTML galvutės skyriumi, kaip tai darėme paskutinėje pamokoje. Tokiu būdu mūsų HTML dokumentas išlieka švarus ir tvarkingas.
• Naudojant kompiliatoriaus įrankius, tokius kaip „WinLESS“ ir „LESS.app“, galima generuoti statinį CSS išėjimą. Taigi, jei sintaksėje yra kažkas negerai, mes galime ją iš karto išnagrinėti.
• „Preset Mixins“, kaip „LESS Elements“, yra geriausias mūsų draugas. Jis gali iš tikrųjų sutaupyti laiko, kai kompiliuojame nuobodų CSS3 turtą.

.