Tegutsege tõhusalt LESS Tips ja Tools abil

Meie eelmises juhendis oleme õppinud, kuidas kasutada LESSi praktilisel viisil, kasutades ChrunchAppi, näiteks koodi koostamiseks. Seekord jalutame läbi mõned näpunäited, mis aitavad suurendada LESS süntaksite koostamisel meie tootlikkust ja tootlikkust. Me seadistame oma töölaua / töökeskkonna, võimaldades meie praeguse redaktori süntaksi esiletõstmist, kasutades automaatset kompilaatoritööriistu ja kasutades eelseadistatud Mixins, seejärel sünkroonida need kõik koos.

Noh, kui sa oled valmis, alustame.

Lahtiütlemine: Allpool toodud näpunäited on tuletatud minu igapäevastest kogemustest veebidisainerina. Seega, enne kui me seda edasi liigume, tahan juhtida tähelepanu sellele, et näpunäited võivad sobida mõnede disaineritega ja mitte teistega; nagu iga teine ​​veebis leiduv ots. Sellegipoolest loodan, et saate järgmistest nõuetest kasu saada.

1. Koodi esiletõstja

Nagu me varem mainisime, oleme tutvustanud teid ChrunchAppile. Kuid see rakendus ei pruugi olla iga veebidisaineri eelistus; sest igal disaineril on oma töökeskkond, sealhulgas enda valitud koodiredaktor.

Selle asemel, et installida teist koodiredaktorit, saate tegelikult kasutada oma praegust ja lubada selles süntaksi esiletõstmist. Niisiis jagun selles postituses mõned näpunäited, et lisada LESS-kood esile kaheks kuulsaks tekstiredaktoriks: Sublime Text 2 ja Notepad++.

Sublime Text 2

See redaktor on praegu minu eelistatud valik koodide koostamiseks. See rakendus on saadaval Windowsi, Linuxi ja OSXi jaoks, nii et olenemata sellest, milline on teie operatsioonisüsteem, on teil endiselt võimalik seda otsa jälgida.

Nüüd laadime selle oma ametlikust veebisaidilt alla ja proovige seda toimetajat. Seejärel lugege alltoodud juhiseid, et võimaldada selles LESS värvi esiletõstmist.

Märge: Enne allalaadimist veenduge, et olete litsentsi läbi lugenud, sest tasuta versioon on mõeldud ainult hindamiseks.

Paigaldage paketi konsool

Kõigepealt avage oma Sublime Text 2 ja kuvage selles menüüs konsool Vaade> Näita konsooli

Seejärel kopeerige ja kleepige konsoolisse järgmine käsurida, seejärel vajuta Enter, et installida pakettide juhtimine veebisaidilt wBond.net:

import urllib2, os; pf = "Paketi juhtimine.sublime-pakett"; ipp = sublime.installed_packages_path (); os.makedirs (ipp), kui mitte os.path.exists (ipp) other Ei; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); avatud (os.path.join (ipp, pf), 'wb') .write (urllib2.urlopen ('http://sublime.wbond.net/'+pf.replace (",'% 20 ')). loe ()); print 'Palun taaskäivitage Sublime Text, et lõpetada installimine'

See Pakettide konsool aitab meil esiletõstmise paketti installida.

LESS-esiletõstva paketi installimine

Taaskäivitage Sublime Text 2 ja näidake sellest menüüst käsuriba Tööriistad> Käsupalett. Oodake, kuni pakettide nimekiri on kõik laaditud. Seejärel tippige Installige pakett pakettide hoidlate otsimiseks ja laadimiseks.

Seejärel otsige LESS pakett hoidla loendist ja vajutage Enter.

Oodake hetk, kui pakett allalaadimiseks ja installimiseks pakutakse Sublime Text 2, kuni olekuribale ilmub järgmine teade.

Mine menüüsse Vaade> Süntaks, loendis peaksite nägema LESS. See tähendab, et Sublime Text 2 toetab .vähem ja teie LESS süntaksil peaks olema ka õige värvi esiletõstmine.

Notepad++

Notepad ++ on vaba, avatud lähtekoodiga redaktor ja selle funktsionaalsuse laiendamiseks on palju kasulikke pluginaid. Seda kasutavad ka paljud veebidisainerid / arendajad, eriti need, kes töötavad Windowsi operatsioonisüsteemiga. Niisiis, ma otsustan lisada ka vihje, et lisada sellele LESS teksti.

Installi LESS-esiletõstmine Notepadis++

LESS-värvi esiletõstmise lubamine Notepad ++-is on üsna lihtne.

Kõigepealt laadige sellest linkist alla kasutajale Notepad ++ mõeldud LESS pakett (userDefineLang_LESS.xml). Siis minge Vaade> Kasutaja määratud dialoog.

Ilmub järgmine hüpikaken. Klõpsake nuppu Importimine ... nupp ja leidke allalaaditud fail .xml faili. Seejärel taaskäivitage Notepad++.

Avage oma .less fail ja minge menüüs Language. Nüüd peaksite nägema LESSi. Valige see, kui soovid värvi esiletõstmiseks rakendada oma LESS süntaksit.

Rohkem ressursse

Turul on palju teisi toimetajaid. Seega, siin lisame teile mõned kasulikud lingid, kui te ei kasuta ühtegi ülaltoodud toimetajatest.

Adobe DreamWeaver

Kahtlemata on Dreamweaveril suur baas. See on saadaval nii Maci kui ka Windowsi jaoks. Niisiis, kui kasutate seda toimetajat, on siin üks hea allikas, et installida LESS-i esiletõstmine Adobe DreamWeaveris.

Coda

Kui kasutate Maci, siis ilmselt teate Codat, see redaktor on üks Maci kasutajate seas populaarsemaid. Ja siin on, kuidas saate LESSi Codasse installida.

Geany

See on üks Linuxi kasutajate seas populaarsemaid koodiredaktori. Mõned minu kontoris töötavad arvutid, mis töötavad Linuxis, kasutavad ka Geany. Niisiis, kui kasutate seda ka, võite lisada LESS-esiletõstu, järgides seda juhendit SuperUser.com-is

2. LESS Compiler

Erinevalt ChrunchAppist, millel on sisseehitatud LESS kompilaator, ei ole teistel redaktoritel seda vaikimisi. Kuigi seda on võimalik lisada, on see üldkasutajatele üsna tehniline. Niisiis on parim lahendus teha kompileerimine järgmiste tööriistade abil: WinLESS või LESS.app. WinLESS on Windowsi jaoks mõeldud kompilaator, samas kui LESS.app on ehitatud OSXi jaoks.

Need tööriistad muudavad meie LESS koodi automaatselt staatiliseks CSS-iks, kui me salvestame faili ja teatame otse, kui koodis on viga. Noh, lubage mul näidata teile, kui käputäis see tööriist on:

Esiteks tahaksin alla laadida WinLESS ja installida.

Klõpsake nupul Lisa kaust ja leidke kataloog, kuhu paned .vähem failid (eeldan, et olete juba loonud vähemalt ühe). Kui lisate ühe; WinLESS otsib ja leiab kõik .vähem faile ja kuvatakse loendis.

Mine menüüsse Fail> Seadistamine, ja veenduge, et need valikud oleksid kontrollitud;

• Failide automaatne salvestamine salvestamisel
• Näita edukalt koostatud sõnumit

Saame ka väljundkausta seada, kui soovime seda mujal salvestada. Kuid selles näites jätame selle võimaluse selliseks, nagu see on; mis tähendab, et väljundfail salvestatakse samas kataloogis .vähem faili.

Ava oma .vähem failist lisatud kataloogist, tehke mõned muudatused ja salvestage see.

WinLESS teavitab teid, kui fail on edukalt koostatud .css või kui koodides on viga. Nii saate otsida .css väljundit otse, selle asemel et oodata, et koodid oleksid kompileerimiseks valmis.

Kui kasutate Maci, saate kasutada LESS.app'i, millel on sama funktsioon, nagu WinLESS.

Eelseadistatud segud

Praeguses kaasaegses veebidisaini kasutuses kasutame selliseid CSS3 omadusi nagu Gradient, Shadow või Border Radius.

-webkit-border-radius: 3px; -moz-border-radius: 3px; raadius: 3x;

või

taust: -moz-lineaarne gradient (ülemine, # f0f9ff 0%, # a1dbff 100%); taust: -webkit-lineaarne gradient (ülemine, # f0f9ff 0%, # a1dbff 100%); taust: -o-lineaarne gradient (ülemine, # f0f9ff 0%, # a1dbff 100%); taust: -ms-lineaarne gradient (ülemine, # f0f9ff 0%, # a1dbff 100%); taust: lineaarne gradient (ülemine, # f0f9ff 0%, # a1dbff 100%);

Meie eelmises juhendis oleme selle süntaksi lihtsustamiseks teinud mõned Mixins. Õnneks on mõned veebidisaini kogukonna inimesed piisavalt suured, et säästa aega nende kasulike segude kompileerimiseks, nii et me ei pea seda ise koostama..

Ja üks minu lemmik on vähem elemente, mis sisaldab palju kasulikke CSS3 eelseadistatud reegleid. Seega kirjutame nüüd tüütu müüja eesliidetest vähem koodi.

Olgu nüüd, vaatame, kuidas kõik need ülaltoodud näpunäited tõesti aitavad.

Nende kõigi ühendamine

Selles näites loome lihtsa lingi nupu. Kõigepealt tahaksin luua uue HTML-dokumendi ja panna järgmise hinnalisandi:

     Klõpsake nuppu Me 

Loo styles.less kui meie peamine LESS-stiil, salvestage see meie HTML-dokumendiga samasse kausta ja lisage kaust WinLESS-i.

Importige elemente oleme enne selle süntaksit kasutanud:

@import "elements.less";

Nüüd saame kasutada mis tahes segatud elemente, mida pakutakse elementidest .gradient, .ümardatud, ja .piirneb. Ma olen kindel, et Mixini nimi on täiesti iseenesestmõistetav.

Seejärel pange allolevad LESS-reeglid oma stiilile. Ja salvestage see uuesti

 a kuva: inline-block; polsterdus: 10px 20px; värv: # 555; teksti kaunistus: mitte; .bw-gradient (#eee, 240, 255); .rounded; .bordered; &: hover .bw-gradient (#eee, 255, 240);  

Kuna meie .vähem fail on lisatud WinLESS-i, see kompileeritakse automaatselt .css. Nüüd vaatame tulemusi.

Noh, see ei ole nii halb, kas see pole, arvestades, et see nupp on loodud vähemate ridadega, kui oli vaja. Ja siin on tegelik genereeritud staatiline CSS:

 a kuva: inline-block; polsterdus: 10px 20px; värv: # 555; teksti kaunistus: mitte; taust: #eeeeee; taust: -webkit-gradient (lineaarne, vasakpoolne, vasakul, värvipeatus (0, # f0f0f0), värvipeatus (1, #ffffff)); taust: -ms-lineaarne gradient (alumine, # f0f0f0 0%, # f0f0f0 100%); taust: -moz-lineaarne gradiend (keskosas, # f0f0f0 0%, #ffffff 100%); -webkit-border-radius: 2px; -moz-border-radius: 2px; raadius: 2px; -moz-background-clip: polsterdus; -webkit-tausta-klipp: polsterduskarp; taustklamber: polsterduskarp; border-top: tahke 1px #eeeeee; vasakpoolne: tugev 1tk #eeeeee; parempoolne: tugev 1px #eeeeee; alumine serv: tahke 1tk #eeeeee;  a: hover background: #eeeeee; taust: -webkit-gradient (lineaarne, vasakpoolne, vasakul, värvipeatus (0, #ffffff), värvipeatus (1, # f0f0f0)); taust: -ms-lineaarne gradient (põhi, #ffffff 0%, #ffffff 100%); taust: -moz-lineaarne gradient (keskosas, #ffffff 0%, # f0f0f0 100%); 

Kokkuvõttes

Siin on kiire kokkuvõte sellest, mida oleme selles postituses arutanud:

• Võimaldades süntakside esiletõstmise meie praeguses redaktoris, ei pea me täiendavat redaktorit paigaldama ainult LESS-süntaksi koostamiseks; see võib teie kettale salvestada mõningaid tühikuid.
• Me ei pea enam alla laadima ja linkima LESS.js'i raamatukogu meie HTML-i peatükki, nagu tegime ka meie viimases juhendis. Nii jääb meie HTML-dokument puhtaks ja puhas.
• Kompilaatoritööriistade nagu WinLESS ja LESS.app kasutamine võib tekitada staatilise CSS-väljundi koheselt. Niisiis, kui süntaksiga on midagi valesti, saame seda kohe uurida.
• Preset Mixins nagu LESS Elements on meie parim sõber. See võib tõesti säästa meie aega, kui koostame tüütu CSS3 vara.

.