Efektīva sadarbība ar LESS padomiem un rīkiem

Iepriekšējā apmācībā mēs esam iemācījušies praktiski izmantot LESS, izmantojot tādus lietojumus kā ChrunchApp, lai apkopotu kodu. Šoreiz mēs izbaudīsim dažus noderīgus padomus, kas varēs uzlabot mūsu sniegumu un produktivitāti, veidojot LESS sintaksi. Mēs izveidosim darbvirsmas / darba vidi, iespējot mūsu pašreizējā redaktora sintakses izcelšanu, izmantojot automātiskos kompilatora rīkus un izmantojot iepriekš iestatītos Mixins, pēc tam sinhronizējot tos kopā.

Nu, ja esat gatavs, sāciet.

Atruna: Tālāk paskaidrotie padomi ir iegūti no manas ikdienas pieredzes kā tīmekļa dizainera. Tātad, pirms mēs to turpinām, es vēlos uzsvērt, ka padomi var atbilst dažiem dizaineriem, nevis citiem; tāpat kā jebkurš cits, kas atrodams tīmeklī. Tomēr es ceru, ka jūs varat gūt kaut ko noderīgu no šādiem padomiem.

1. Kodu izgaismotājs

Kā jau iepriekš minēts, mēs esam iepazīstinājuši jūs ar ChrunchApp. Tomēr šī lietotne, iespējams, nav katra tīmekļa dizainera izvēle; tāpēc, ka katram dizainerim ir sava darba vide, tostarp to izvēles koda redaktors.

Tā vietā, lai instalētu citu koda redaktoru, jūs faktiski varat izmantot savu pašreizējo un iespējot sintakses izcelšanu tajā. Tātad šajā amatā es dalīšos dažos padomos, lai pievienotu LESS kodu, izceļot divos slavenos teksta redaktoros: Sublime Text 2 un Notepad++.

Sublime Text 2

Šis redaktors pašlaik ir mana vēlamā izvēle, lai palīdzētu man izveidot kodus. Šī lietojumprogramma ir pieejama operētājsistēmai Windows, Linux un OSX, tāpēc neatkarīgi no jūsu OS, jūs joprojām varēsiet sekot šim padomam.

Tagad lejupielādēsim to no oficiālās tīmekļa vietnes un izmēģiniet šo redaktoru. Pēc tam izlasiet tālāk sniegtos norādījumus, lai iespējotu LESS krāsu izcelšanu tajā.

Piezīme: Pirms lejupielādes pārliecinieties, vai esat izlasījis licenci, jo bezmaksas versija ir paredzēta tikai novērtēšanai.

Instalējiet pakotnes konsoli

Vispirms atveriet savu Sublime Text 2 un atveriet konsoli no šīs izvēlnes Skatīt> Rādīt konsoli

Pēc tam kopējiet un ielīmējiet šo komandrindu konsolē, pēc tam nospiediet Enter, lai instalētu pakotnes kontroli no wBond.net:

importēt urllib2, os; pf = "Package Control.sublime-package"; ipp = sublime.installed_packages_path (); os.makedirs (ipp), ja ne os.path.exists (ipp) cits Nav; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); atvērts (os.path.join (ipp, pf), 'wb') .write (urllib2.urlopen ('http://sublime.wbond.net/'+pf.replace (",'% 20 ')). lasīt ()); drukāt “Lūdzu, restartējiet Sublime Text, lai pabeigtu instalēšanu”

Tas Komplekta konsole palīdzēs mums instalēt iezīmēto paketi.

LESS izcelšanas pakotnes instalēšana

Restartējiet tekstu Sublime 2 un šajā izvēlnē rādīt komandu paleti Rīki> Komandu palete. Pagaidiet, līdz viss pakotņu saraksts ir ielādēts. Pēc tam ierakstiet Instalēt pakotni lai meklētu un ielādētu pakotņu krātuves.

Pēc tam meklējiet LESS pakotni no krātuves saraksta un nospiediet Enter.

Pagaidiet minūti, līdz tiek lejupielādēta un instalēta pakotne Sublime Text 2, līdz statusa joslā parādīsies šāds paziņojums.

Dodieties uz izvēlni Skatīt> Sintakse, sarakstā vajadzētu redzēt LESS. Tas nozīmē, ka Sublime Text 2 atbalsta .mazāk un jūsu LESS sintaksei vajadzētu būt arī pareizai krāsu izcelšanai.

Notepad++

Notepad ++ ir bezmaksas, atvērtā pirmkoda redaktors, un tam ir daudz noderīgu spraudņu, lai paplašinātu tā funkcionalitāti. To plaši izmanto daudzi web dizaineri / izstrādātāji, īpaši tie, kas strādā ar Windows operētājsistēmu. Tātad, es nolemšu iekļaut arī padomu, lai pievienotu LESS tekstu, kas to uzsver.

Instalējiet LESS-iezīmi Notepad++

Iespējams, LESS krāsu izcelšana Notepad ++ ir diezgan vienkārša.

Vispirms lejupielādējiet LESS paketi Notepad ++ no šīs saites (userDefineLang_LESS.xml). Tad dodieties uz Skatīt> Lietotāja noteiktais dialogs.

Parādīsies tālāk redzamais uznirstošais lodziņš. Noklikšķiniet uz Importēt ... pogu un atrodiet lejupielādēto .xml failu. Pēc tam restartējiet Notepad++.

Atveriet savu .less failu un dodieties uz valodu izvēlni. Tagad jums vajadzētu redzēt LESS iekļauto. Atlasiet to, lai izmantotu krāsu izcelšanu jūsu LESS sintaksei.

Vairāk resursu

Tirgū ir daudz citu redaktoru. Tātad, šeit mēs ietveram dažas noderīgas saites, ja neizmantojat nevienu no iepriekš minētajiem redaktoriem.

Adobe DreamWeaver

Neapšaubāmi, Dreamweaver ir milzīga lietotāju bāze. Tas ir pieejams gan Mac, gan Windows. Tātad, ja jūs izmantojat šo redaktoru, šeit ir viens no labiem avotiem, lai instalētu LESS izgaismojumu programmā Adobe DreamWeaver.

Coda

Ja lietojat Mac, jūs, iespējams, zināt Coda, šis redaktors ir viens no populārākajiem Mac lietotājiem. Un šeit ir, kā jūs varat instalēt LESS Coda.

Geany

Tas ir viens no populārākajiem koda redaktoriem Linux lietotāju vidū. Daži datori manā birojā, kas darbojas Linux, izmanto arī Geany. Tātad, ja jūs to izmantojat, varat iekļaut LESS izcēlumu, izpildot šo norādījumu vietnē SuperUser.com

2. LESS Compiler

Atšķirībā no ChrunchApp, kuram ir iebūvēts LESS kompilators, pārējiem redaktoriem tas nebūs pēc noklusējuma. Lai gan ir daži veidi, kā to iekļaut, taču tas ir diezgan tehnisks vispārējiem lietotājiem. Tātad labākais risinājums ir apkopot, izmantojot šādus rīkus: WinLESS vai LESS.app. WinLESS ir Windows kompilators, bet LESS.app ir veidots OSX.

Šie rīki var automātiski pārvērst savu LESS kodu statiskā CSS, kad saglabājam failu un ziņojam tieši, ja kodā ir kļūda. Ļaujiet man parādīt, cik šis rīks ir:

Pirmkārt, es gribētu lejupielādēt WinLESS un instalēt to.

Noklikšķiniet uz pogas Pievienot mapi un atrodiet direktoriju, kurā ievietojat .mazāk failus (es pieņemu, ka jau esat izveidojis vismaz vienu). Kad esat pievienojis vienu; WinLESS skenēs un atradīs visu .mazāk failus un parādīt jums sarakstā.

Atveriet izvēlni Fails> Iestatīšana, un pārliecinieties, vai šīs opcijas ir pārbaudītas;

• Automātiski apkopo failus, kad tie ir saglabāti
• Rādīt ziņojumu par veiksmīgu apkopošanu

Mēs varam arī iestatīt izejas mapi, ja mēs to vēlamies saglabāt citur. Taču šajā piemērā mēs atstāsim šo iespēju kā tādu; tas nozīmē, ka izejas fails tiks saglabāts tajā pašā direktorijā kā .mazāk failu.

Atver savu .mazāk no pievienotās direktorijas, veiciet dažas izmaiņas un saglabājiet to.

WinLESS paziņos, kad fails ir veiksmīgi apkopots .css vai, ja kodos ir kļūda. Tādā veidā jūs varat pārbaudīt .css izvadi tieši, nevis gaidīt, lai kodi tiktu pabeigti, lai to apkopotu.

Ja lietojat Mac, varat izmantot LESS.app, kam ir tāda pati funkcionalitāte kā WinLESS.

Iepriekš iestatītie maisījumi

Pašreizējās modernās tīmekļa dizaina praksēs izmantosim tādas CSS3 īpašības kā Gradient, Shadow vai Border Radius, kas izskatās šādi:

-webkit-border-radius: 3px; -moz-border-rādiuss: 3px; robežu rādiuss: 3px;

vai

fons: -moz-lineārs gradients (augšā, # f0f9ff 0%, # a1dbff 100%); fons: -webkit-lineārs gradients (augšā, # f0f9ff 0%, # a1dbff 100%); fons: -o-lineārs gradients (augšā, # f0f9ff 0%, # a1dbff 100%); fons: -ms-lineārs gradients (augšā, # f0f9ff 0%, # a1dbff 100%); fons: lineārais gradients (augšā, # f0f9ff 0%, # a1dbff 100%);

Iepriekšējā apmācībā mēs esam izveidojuši dažas Mixins, lai vienkāršotu šo sintaksi. Par laimi, daži cilvēki web dizaina kopienā ir patiešām dāsni, lai ietaupītu laiku, lai apkopotu šos noderīgos Mixins, lai mums nebūtu jākompensē sevi no nulles.

Un viens no maniem iecienītākajiem ir mazāk elementi, kas satur daudz noderīgu CSS3 iepriekšnoteiktu noteikumu. Tādējādi mēs tagad rakstām mazāk koda rindu no garlaicīgiem pārdevēja prefiksa.

Labi, tagad redzēsim, kā visi šie iepriekš minētie padomi patiešām var palīdzēt.

Visu to apvienošana

Šajā piemērā es izveidosiet vienkāršu saites pogu. Vispirms es gribētu izveidot jaunu HTML dokumentu un ievietot šādu uzcenojumu:

     Noklikšķiniet uz Mani 

Izveidojiet a styles.less kā mūsu galveno LESS stilu, saglabājiet to tajā pašā mapē ar mūsu HTML dokumentu un pievienojiet mapi WinLESS.

Importējiet elementi mēs esam lejupielādējuši pirms šīs sintakses izmantošanas:

@import "elements.less";

Tagad mēs varam izmantot jebkurus Mixins piedāvātos elementus .slīpums, .noapaļota, un .robežojas. Es esmu pārliecināts, ka Mixins vārds ir diezgan pašsaprotams.

Tālāk zemāk ievietojiet LESS noteikumus savā stilā. Un saglabājiet to vēlreiz

 a displejs: inline-bloks; polsterējums: 10px 20px; krāsa: # 555; teksta apdare: nav; .bw-gradients (#eee, 240, 255); . .bordered; &: hover .bw-gradient (#eee, 255, 240);  

Kopš mūsu .mazāk fails ir pievienots WinLESS, tas tiks automātiski apkopots .css. Tagad aplūkosim rezultātus.

Nu, tas nav tik slikti, vai ne, ņemot vērā, ka šī poga tika izveidota ar mazākām līnijām nekā tas, kas bija nepieciešams. Un šeit ir faktiskā ģenerētā statiskā CSS:

 a displejs: inline-bloks; polsterējums: 10px 20px; krāsa: # 555; teksta apdare: nav; fons: #eeeeee; fons: -webkit-gradients (lineārs, kreisais apakšējais, kreisais augšējais, krāsu stop (0, # f0f0f0), krāsu apstāšanās (1, #ffffff)); fons: -ms-lineārs gradients (apakšā, # f0f0f0 0%, # f0f0f0 100%); fons: -moz-lineārais gradients (centra apakšā, # f0f0f0 0%, #ffffff 100%); -webkit-robežu rādiuss: 2px; -moz-border-rādiuss: 2px; robežu rādiuss: 2px; -moz-fona klips: polsterējums; -webkit-fona klips: polsterējums; fona klips: polsterējums; border-top: ciets 1px #eeeeee; robežu pa kreisi: ciets 1px #eeeeee; robežas labajā pusē: ciets 1px #eeeeee; robežu apakšā: ciets 1px #eeeeee;  a: lidināties fons: #eeeeee; fons: -webkit-gradients (lineārs, kreisais apakšējais, kreisais augšējais, krāsu stop (0, #ffffff), krāsu apstāšanās (1, # f0f0f0)); fons: -ms-lineārais gradients (apakšā, #ffffff 0%, #ffffff 100%); fona: -moz-lineārā gradienta (vidus apakšā, #ffffff 0%, # f0f0f0 100%); 

Kopsavilkumā

Šeit ir īss kopsavilkums par to, ko esam apsprieduši šajā ziņojumā:

• Ieslēdzot sintakses izcelšanu mūsu pašreizējā redaktorā, mums nav nepieciešams instalēt papildu redaktoru tikai LESS sintakses veidošanai; tas var ietaupīt dažas diska vietas / atmiņu.
• Mums vairs nav nepieciešams lejupielādēt un sasaistīt LESS.js bibliotēku mūsu HTML galvenajā sadaļā, kā mēs to izdarījām pēdējā apmācībā. Tādā veidā mūsu HTML dokuments joprojām ir tīrs un veikls.
• Izmantojot kompilatora rīkus, piemēram, WinLESS un LESS.app, var radīt statisku CSS izeju uzreiz. Tātad, ja ar sintaksi ir kaut kas nepareizs, mēs to varam uzreiz pārbaudīt.
• Preset Mixins, piemēram, LESS Elements, ir mūsu labākais draugs. Tas patiešām var ietaupīt mūsu laiku, sastādot garlaicīgu CSS3 īpašumu.

.