Učinkovito radite s manje savjeta i alata

U našem prethodnom priručniku naučili smo kako koristiti LESS na praktičan način koristeći aplikacije kao što je ChrunchApp za kompajliranje koda. Ovaj put ćemo proći kroz neke korisne savjete koji će moći povećati našu učinkovitost i produktivnost prilikom kompiliranja LESS sintakse. Namjeravat ćemo postaviti radnu / radnu okolinu omogućavanjem isticanja sintakse za trenutnog urednika, korištenjem alata za automatsko kompajliranje i korištenjem unaprijed postavljenih Mixins, a zatim ih sinkronizirati sve zajedno.

Pa, ako ste spremni, počnimo.

Odricanje: Niže navedeni savjeti potječu iz svakodnevnih iskustava kao web-dizajner. Dakle, prije nego što prođemo dalje, želim naglasiti da bi savjeti mogli odgovarati nekim dizajnerima, a ne drugima; kao i bilo koji drugi savjet koji se nalazi na webu. Ipak, nadam se da možete izvući nešto korisno iz sljedećih savjeta.

1. Označivač koda

Kao što smo već spomenuli, upoznali smo vas s ChrunchAppom. Međutim, ova aplikacija možda nije prednost svakog web dizajnera; jer svaki dizajner ima svoju radnu okolinu, uključujući i uređivač koda po svom izboru.

Umjesto da instalirate drugi uređivač koda, zapravo možete i dalje koristiti svoju trenutnu i omogućiti označavanje sintakse u njoj. Dakle, u ovom postu podijelit ću nekoliko savjeta za dodavanje označavanja LESS koda u 2 poznata uređivača teksta: Uzvišen tekst 2 i blokčić za bilješke++.

Uzvišen tekst 2

Ovaj urednik je trenutno moj omiljeni izbor da mi pomogne sastaviti kodove. Ova aplikacija je dostupna za Windows, Linux i OSX, tako da bez obzira na vaš OS, i dalje ćete moći pratiti ovaj savjet.

Sada ga preuzimamo s službene web-lokacije i isprobavamo ovaj uređivač. Zatim pročitajte sljedeće upute kako biste u njemu omogućili isticanje boje LESS.

Bilješka: Provjerite jeste li pročitali licencu prije preuzimanja, jer je besplatna verzija namijenjena samo ocjenjivanju.

Instalirajte konzolu za paket

Prvo otvorite svoj Sublime Text 2 i prikažite konzolu iz ovog izbornika Prikaz> Prikaži konzolu

Zatim kopirajte i zalijepite sljedeći red za naredbe u konzolu, a zatim pritisnite Enter da biste instalirali kontrolu paketa s web-lokacije wBond.net:

import urllib2, os; pf = "Paket Control.sublime-paket"; IPP = sublime.installed_packages_path (); os.makedirs (ipp) ako nije os.path.exists (ipp) drugo Nema; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); otvoren (os.path.join (IPP, pf), 'SB') .write (urllib2.urlopen ( 'http://sublime.wbond.net/'+pf.replace (”, '% 20')). print ()); print 'Molim ponovno pokrenite Sublime Text da biste završili instalaciju'

Ovaj Konzola za paket će nam pomoći instalirati vrhunski paket.

Instaliranje paketa za isticanje LESS-a

Ponovno pokrenite Sublime Text 2 i iz ovog izbornika pokažite Paleta naredbi Alati> Paleta naredbi. Pričekajte dok se popis paketa ne učita. Zatim upišite Instalirajte paket za pretraživanje i učitavanje spremišta paketa.

Potom potražite paket LESS s popisa spremišta i pritisnite Enter.

Pričekajte minutu da Sublime Text 2 preuzme i instalira paket dok se na statusnoj traci ne pojavi sljedeća obavijest.

Idite na izbornik Prikaz> Sintaksa, trebali biste vidjeti LESS na popisu. To znači da uzvišeni tekst 2 podržava .manje i vaša LESS sintaksa bi također trebala imati odgovarajuće označavanje boja sada.

blokčić za bilješke++

Notepad ++ je besplatni uređivač otvorenog koda i ima mnogo korisnih dodataka za proširenje njegove funkcionalnosti. Također je široko korišten od strane mnogih web dizajnera / programera, posebno onih koji rade s operacijskim sustavom Windows. Dakle, odlučio sam uključiti i savjet za dodavanje manjeg isticanja teksta.

Instalirajte LESS-označite u Notepadu++

Omogućavanje LESS boje u Notepad + + je vrlo jednostavno.

Najprije preuzmite LESS paket za Notepad ++ s ove veze (userDefineLang_LESS.xml). Zatim idite na Prikaz> Korisnički definirani dijalog.

Pojavit će se sljedeći skočni prozor ispod. Kliknite gumb Uvoz… i pronađite preuzetu datoteku .xML datoteka. Zatim ponovno pokrenite bilježnicu++.

Otvorite .less datoteku i idite na izbornik Jezik. Sada biste trebali vidjeti LESS uključen. Odaberite ga da biste primijenili isticanje boje na vašoj sintaksi MANJI.

Više resursa

Na tržištu postoji mnogo drugih urednika. Dakle, ovdje ćemo uključiti neke korisne linkove za vas ako ne koristite nijedan od gore navedenih urednika.

Adobe DreamWeaver

Bez sumnje, Dreamweaver ima veliku korisničku bazu. Dostupan je za Mac i Windows. Dakle, ako koristite ovaj editor, ovdje je jedan od dobrih izvora za instaliranje LESS označite u Adobe DreamWeaver.

završetak

Ako koristite Mac vjerojatno znate Coda, ovaj editor je jedan od najpopularnijih među Mac korisnicima. I, evo kako možete instalirati LESS u Coda.

Geany

To je jedan od popularnijih kod urednika među korisnicima Linuxa. Neka računala u mom uredu koja rade na Linuxu također koriste Geany. Dakle, ako ga i koristite, možete uključiti LESS označavanje slijedeći ove upute na SuperUser.com

2. MANJI prevodilac

Za razliku od ChrunchAppa koji ima ugrađeni LESS kompajler, ostali urednici ga neće imati po defaultu. Iako postoje neki načini da se to uključi, ali to je prilično tehničko za opće korisnike. Zato je najbolje rješenje za kompajliranje pomoću sljedećih alata: winless ili LESS.app. WinLESS je kompajler dizajniran za Windows, dok je LESS.app izgrađen za OSX.

Ovi alati mogu automatski pretvoriti našu LESS kod u statički CSS kada spremimo datoteku i izravno izvješćujemo ako postoji pogreška u kodu. Pa, dopustite mi da vam pokažem koliko je ova alatka:

Prvo, htio bih skinuti WinLESS i instalirati ga.

Kliknite gumb Dodaj mapu i pronađite direktorij u koji ste stavili svoj .manje datoteka (pretpostavljam da ste već stvorili barem jedan). Nakon što dodate jedan; WinLESS će skenirati i pronaći sve .manje i prikazati vas na popisu.

Idite na izbornik Datoteka> Postavljanje, i provjerite jesu li ove opcije označene;

• Automatski kompajlirajte datoteke kada ih spremite
• Prikaži poruku o uspješnom prevođenju

Također možemo postaviti izlaznu mapu, u slučaju da je želimo spremiti negdje drugdje. No, u ovom primjeru ostavit ćemo ovu mogućnost kao što je ona; što znači da će izlazna datoteka biti spremljena u istom direktoriju kao i .manje datoteka.

Otvorite svoj .manje datoteku iz dodanog imenika, napravite nekoliko promjena i Spremite je.

WinLESS će vas obavijestiti kada je datoteka uspješno sastavljena .css ili ako postoji pogreška u kodovima. Na taj način možete izravno provjeriti izlaz .css, umjesto čekanja da se kodovi dovrše kako bi ga kompajlirali.

Ako koristite Mac, možete koristiti LESS.app koji ima istu funkcionalnost kao i WinLESS.

Preset Mixins

U trenutnim modernim praksama izrade web-stranica upotrebljavat ćemo CSS3 svojstva kao što su Gradient, Shadow ili Border Radius koji izgledaju ovako:

-webkit-border-radius: 3px; -moz-border-radius: 3px; granični polumjer: 3px;

ili

background: -moz-linear-gradient (vrh, # f0f9ff 0%, # a1dbff 100%); pozadina: -webkit-linear-gradijent (vrh, # f0f9ff 0%, # a1dbff 100%); pozadina: -o-linearni gradijent (vrh, # f0f9ff 0%, # a1dbff 100%); pozadina: -ms-linearno-gradijent (vrh, # f0f9ff 0%, # a1dbff 100%); pozadina: linearni gradijent (vrh, # f0f9ff 0%, # a1dbff 100%);

U našem prethodnom priručniku napravili smo nekoliko Mixins-a kako bismo pojednostavili ovu sintaksu. Srećom, neki ljudi u zajednici web dizajna su doista dovoljno velikodušni da štede svoje vrijeme za sastavljanje ovih korisnih Mixinova, tako da ih ne moramo sami sastavljati od nule.

A jedan od mojih omiljenih je Less Elements koji sadrži mnoga korisna CSS3 pravila. Dakle, sada ćemo napisati manje redaka koda iz dosadnih prefiksa dobavljača.

U redu, sada, da vidimo kako svi ovi savjeti gore mogu stvarno pomoći.

Stavlja ih sve zajedno

U ovom primjeru stvorit ću jednostavan gumb za povezivanje. Najprije bih htio stvoriti novi HTML dokument i staviti sljedeću oznaku:

     Kliknite Me 

Stvoriti styles.less kao naš glavni LESS stylesheet, spremite ga u istu mapu s našim HTML dokumentom i dodajte mapu u WinLESS.

Uvezite elements.less preuzeli smo prije upotrebe ove sintakse:

@import "elements.less";

Sada možemo upotrijebiti bilo koji Mixins iz elementa .gradijent, .zaokružen, i .omeđeno. Siguran sam da je ime Mixins razumljivo.

Zatim u nastavku stavite LESS pravila u svoj stilski list. I, spremite ga još jednom

 a display: inline-block; obloga: 10px 20px; boja: # 555; text-decoration: none; .bw-gradijent (#eee, 240, 255); .rounded; .bordered; &: hover .bw-gradijent (#eee, 255, 240);  

Od našeg .manje Datoteka je dodana u WinLESS, automatski će se prevesti u .css. Sada ćemo vidjeti rezultate.

Pa, nije tako loše, zar ne, s obzirom da je ovaj gumb izrađen s manje linija nego što je bilo potrebno. I ovdje je stvarni statični CSS:

 a display: inline-block; obloga: 10px 20px; boja: # 555; text-decoration: none; pozadina: #eeeeee; pozadina: -webkit-gradijent (linearno, lijevo dno, lijevi vrh, zaustavljanje boje (0, # f0f0f0), zaustavljanje boje (1, #ffffff)); pozadina: -ms-linearni gradijent (dolje, # f0f0f0 0%, # f0f0f0 100%); background: -moz-linear-gradient (središnje dno, # f0f0f0 0%, #ffffff 100%); -webkit-border-radius: 2px; -moz-border-radius: 2px; granični radijus: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; pozadina-isječak: padding-box; rub-vrh: čvrsto 1px #eeeeee; granica lijevo: čvrsto 1px #eeeeee; granica desno: čvrsto 1px #eeeeee; rub-dno: čvrsto 1px #eeeeee;  a: lebdi pozadina: #eeeeee; background: -webkit-gradijent (linearno, lijevo dno, lijevi vrh, zaustavljanje boje (0, #ffffff), zaustavljanje boje (1, # f0f0f0)); pozadina: -ms-linearni gradijent (dolje, #ffffff 0%, #ffffff 100%); background: -moz-linear-gradient (središnje dno, #ffffff 0%, # f0f0f0 100%); 

U sažetku

Evo kratkog sažetka onoga o čemu smo raspravljali u ovom postu:

• Omogućavanjem isticanja sintakse u našem trenutnom uređivaču, ne trebamo instalirati dodatni uređivač samo za sastavljanje LESS sintakse; ovo vam može uštedjeti malo prostora / memorije na disku.
• Također više ne trebamo preuzimati i povezivati ​​knjižnicu LESS.js u našu HTML glavu kao što smo to učinili u našem posljednjem vodiču. Na taj način naš HTML dokument ostaje čist i uredan.
• Korištenje alata za kompilaciju kao što je WinLESS i LESS.app može generirati statički CSS izlaz odmah. Dakle, ako nešto nije u redu sa sintaksom, možemo je odmah pregledati.
• Preset Mixins kao LESS Elements je naš najbolji prijatelj. To stvarno može uštedjeti naše vrijeme kada kompajlirate dosadan CSS3 svojstvo.

.