Učinkovito delo z manj nasveti in orodji

V naši prejšnji vadnici smo se naučili, kako uporabiti LESS na praktičen način z uporabo aplikacij, kot je ChrunchApp, za pripravo kode. Tokrat bomo šli skozi nekaj priročnih nasvetov, ki bodo lahko povečali našo zmogljivost in produktivnost pri sestavljanju sintakse LESS. Namestili bomo namizno / delovno okolje z omogočanjem poudarjanja sintakse za naš trenutni urejevalnik, z uporabo samodejnih orodij za prevajanje in uporabo prednastavljenih Mixinov, nato pa jih sinhronizirali skupaj..

No, če ste pripravljeni, začnimo.

Opozorilo: Nasveti, opisani spodaj, izhajajo iz mojih vsakodnevnih izkušenj kot spletni oblikovalec. Torej, preden gremo še dlje, želim poudariti, da bi nasveti ustrezali nekaterim oblikovalcem in ne drugim; tako kot vse druge nasvete, ki jih najdete na spletu. Kljub temu upam, da boste lahko izkoristili nekaj koristnega iz naslednjih nasvetov.

1. Oznaka kode

Kot smo že omenili, smo vas seznanili s ChrunchApp. Vendar pa ta aplikacija morda ni prednostna nastavitev vsakega spletnega oblikovalca; ker ima vsak oblikovalec svoje delovno okolje, vključno z urejevalnikom kod po lastni izbiri.

Namesto namestitve drugega urejevalnika kod, lahko dejansko še vedno uporabljate svoj trenutni in omogočite označevanje skladenj. Torej, v tej objavi, bom delil nekaj nasvetov, da dodate LESS kodiranje v 2 znana urejevalnika besedila: Sublime Text 2 in Beležnica++.

Sublime Text 2

Ta urednik je trenutno moja najboljša izbira, da mi pomagam sestaviti kode. Ta aplikacija je na voljo za Windows, Linux in OSX, tako da ne glede na vaš OS, boste še vedno lahko sledite tej namigi.

Zdaj jo prenesemo z uradne spletne strani in preizkusimo ta urejevalnik. Nato preberite naslednja navodila, da omogočite barvno označevanje LESS v njem.

Opomba: Pred prenosom se prepričajte, da ste prebrali licenco, saj je brezplačna različica namenjena samo ocenjevanju.

Namestite konzolo za paket

Najprej odprite Sublime Text 2 in v tem meniju prikažite konzolo Prikaži> Prikaži konzolo

Nato kopirajte in prilepite naslednjo ukazno vrstico v konzolo, nato pa pritisnite Enter, da namestite kontrolnik paketa iz wBond.net:

uvoz urllib2, os; pf = "Package Control.sublime-package"; ipp = sublime.installed_packages_path (); os.makedirs (ipp), če ni os.path.exists (ipp) drugo Nobena; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); open (os.path.join (ipp, pf), 'wb') .write (urllib2.urlopen ('http://sublime.wbond.net/'+pf.replace (', '% 20')). print ()); natisni 'Prosimo, ponovno zaženite Sublime Text, da dokončate namestitev'

To Konzola za paket nam bo pomagal namestiti vrhunski paket.

Namestitev paketa za označevanje LESS

Ponovno zaženite Sublime Text 2 in v tem meniju pokažite Command Palette Orodja> Paleta ukazov. Počakajte, da se seznam paketov naloži. Nato vnesite Namesti paket za iskanje in nalaganje repozitorijev paketov.

Nato poiščite paket LESS s seznama skladišča in pritisnite Enter.

Počakajte minuto, da Sublime Text 2 prenese in namesti paket, dokler se v vrstici stanja ne prikaže naslednje obvestilo.

Pojdite v meni Pogled> Sintaksa, na seznamu bi morali videti LESS. To pomeni, da Sublime Text 2 podpira .manj in vaša sintaksa LESS bi morala prav tako imeti ustrezno barvno poudarjanje.

Beležnica++

Notepad ++ je brezplačen urejevalnik odprtokodnih kod in ima številne uporabne dodatke za razširitev njegove funkcionalnosti. Prav tako se pogosto uporablja veliko spletnih oblikovalcev / razvijalcev, zlasti tistih, ki delajo z operacijskim sistemom Windows. Zato sem se odločil, da vključim tudi namig, da mu dodam poudarjanje besedila LESS.

Namesti osvetlitev LESS v beležnico++

Omogočanje označevanja barv LESS v programu Notepad ++ je precej enostavno.

Najprej prenesite LESS paket za Notepad ++ s te povezave (userDefineLang_LESS.xml). Nato pojdite na Pogled> Uporabniško določen dialog.

Prikaže se spodnji pojavni okvir. Kliknite gumb Uvozi ... in poiščite preneseno datoteko .xml mapa. Nato znova zaženite beležnico++.

Odprite datoteko .less in pojdite v meni Jezik. Zdaj bi morali videti LESS vključeni. Izberite jo, da uporabite barvno poudarjanje na sintaksi LESS.

Več virov

Na trgu je še veliko drugih urednikov. Torej, tukaj bomo vključili nekaj koristnih povezav za vas, če ne uporabljate nobenega od zgoraj navedenih urednikov.

Adobe DreamWeaver

Dreamweaver ima nedvomno veliko uporabniško bazo. Na voljo je za Mac in Windows. Torej, če uporabljate ta urejevalnik, je tukaj dober vir za namestitev označbe LESS v programu Adobe DreamWeaver.

Coda

Če uporabljate Mac, verjetno veste Coda, ta urednik je eden izmed najbolj priljubljenih med uporabniki Mac. In tukaj je, kako lahko namestite LESS v Coda.

Geany

Je eden bolj priljubljenih urejevalnikov kod Linux uporabnikov. Nekateri računalniki v moji pisarni, ki delujejo na Linuxu, uporabljajo tudi Geany. Torej, če ga uporabite tudi, lahko vključite LESS označevanje tako, da sledite navodilom na SuperUser.com

2. Manjši prevajalnik

Za razliko od ChrunchApp, ki ima vgrajen LESS prevajalnik, ga drugi privzeto ne bodo imeli. Čeprav obstaja nekaj načinov, da bi ga vključili, je pa bolj tehnično za splošne uporabnike. Zato je najboljša rešitev, da naredim prevajanje z naslednjimi orodji: BREZPLAČNO ali LESS.app. WinLESS je prevajalnik, zasnovan za Windows, medtem ko je LESS.app zgrajen za OSX.

Ta orodja lahko pretvorijo našo LESS kodo v statični CSS samodejno, ko datoteko shranimo in neposredno poročamo, če je koda napaka. Naj vam pokažem, kako peščica je to orodje:

Najprej bi rad prenesel WinLESS in ga namestil.

Kliknite gumb Dodaj mapo in poiščite imenik, kamor ste ga dali .manj datoteke (predvidevam, da ste že ustvarili vsaj eno). Ko dodate eno; WinLESS bo pregledal in našel vse .manj in prikaže seznam na seznamu.

Pojdite v meni Datoteka> Nastavitev, in preverite, ali so te možnosti preverjene;

• Samodejno prevede datoteke, ko jih shranite
• Pokaži sporočilo o uspešnem prevajanju

Lahko tudi nastavimo izhodno mapo, če jo želimo shraniti drugje. Toda v tem primeru bomo pustili to možnost, kot je; kar pomeni, da bo izhodna datoteka shranjena v istem imeniku kot .manj mapa.

Odprite .manj iz dodanega imenika, naredite nekaj sprememb in Shrani.

WinLESS vas bo obvestil, ko bo datoteka uspešno prevedena .css ali če je prišlo do napake v kodah. Na ta način lahko neposredno preverite izhodno datoteko .css, namesto da bi morali počakati, da se kode dokončajo.

Če uporabljate Mac, lahko uporabite LESS.app, ki ima enako funkcijo kot brezžično.

Preset Mixins

V trenutnih sodobnih praksah spletnega oblikovanja bomo uporabili lastnosti CSS3, kot sta Gradient, Shadow ali Border Radius, ki izgledajo takole:

-webkit-border-radius: 3px; -moz-border-radius: 3px; obrobni polmer: 3px;

ali

ozadje: -moz-linear-gradient (zgoraj, # f0f9ff 0%, # a1dbff 100%); ozadje: -webkit-linear-gradient (zgoraj, # f0f9ff 0%, # a1dbff 100%); ozadje: -o-linearni gradient (zgoraj, # f0f9ff 0%, # a1dbff 100%); ozadje: -ms-linearni gradient (zgoraj, # f0f9ff 0%, # a1dbff 100%); ozadje: linearno gradient (top, # f0f9ff 0%, # a1dbff 100%);

V naši prejšnji vadnici smo naredili nekaj Mixinsov za poenostavitev te skladnje. Na srečo so nekateri ljudje v skupnosti za spletno oblikovanje resnično dovolj velikodušni, da si prihranijo čas za pripravo teh koristnih Mixinsov, tako da jih ne bomo morali sami sestavljati iz nič.

Eden od mojih najljubših je manj elementov, ki vsebuje veliko uporabnih prednastavljenih pravil CSS3. Tako zdaj zapišemo manj vrstic kode iz dolgočasnih predpon za dobavitelje.

V redu, poglejmo, kako lahko vsi ti nasveti zgoraj pomagajo.

Vse skupaj postavimo

V tem primeru bom ustvaril preprost gumb za povezavo. Najprej bi rad ustvaril nov dokument HTML in dal naslednjo oznako:

     Kliknite Me 

Ustvariti styles.less kot naš glavni LESS stylesheet, ga shranite v isto mapo z našim HTML dokumentom in dodajte mapo v WinLESS.

Uvozite elementov smo prenesli pred uporabo te skladnje:

@import "elements.less";

Zdaj lahko uporabimo vse Mixins, ki jih zagotavlja element .gradient, .zaokroženo, in .obrobljeno. Prepričan sem, da je ime Mixins razumljivo.

Nato spodaj določite pravila LESS v vaši slogovni listi. In ga shranite še enkrat

 a prikaz: inline-block; oblazinjenje: 10px 20px; barva: # 555; dekoracija besedila: nobena; .bw-gradient (#eee, 240, 255); .okrog; .bordered; &: hover .bw-gradient (#eee, 255, 240);  

Od našega .manj Datoteka je bila dodana v WinLESS, samodejno se bo prevedla v .css. Zdaj pa si oglejmo rezultate.

No, ni tako slabo, če ne, saj je bil ta gumb ustvarjen z manj linijami, kot je bilo potrebno. Tukaj je dejansko ustvarjen statični CSS:

 a prikaz: inline-block; oblazinjenje: 10px 20px; barva: # 555; dekoracija besedila: nobena; ozadje: #eeeeee; ozadje: -webkit-gradient (linearno, levo spodaj, levo zgoraj, barvno stop (0, # f0f0f0), barvno zaustavitev (1, #ffffff)); ozadje: -ms-linearni gradient (spodaj, # f0f0f0 0%, # f0f0f0 100%); ozadje: -moz-linear-gradient (sredinsko dno, # f0f0f0 0%, #ffffff 100%); -webkit-border-radius: 2px; -moz-border-radius: 2px; obrobni polmer: 2px; -moz-background-clip: oblazinjenje; -webkit-ozadje-posnetek: padding-box; ozadje posnetek: padding-box; border-top: trdno 1px #eeeeee; meja levo: trdno 1px #eeeeee; meja desno: trdno 1px #eeeeee; obroba spodaj: trdna 1px #eeeeee;  a: hover ozadje: #eeeeee; ozadje: -webkit-gradient (linearno, levo spodaj, levo zgoraj, barvno stop (0, #ffffff), barvno zaustavitev (1, # f0f0f0)); ozadje: -ms-linearni gradient (spodaj, #ffffff 0%, #ffffff 100%); ozadje: -moz-linear-gradient (osrednje dno, #ffffff 0%, # f0f0f0 100%); 

V povzetku

Tukaj je kratek povzetek o tem, o čemer smo razpravljali v tej objavi:

• Z omogočanjem poudarjanja sintakse v našem trenutnem urejevalniku ni treba namestiti dodatnega urejevalnika samo za skladanje sintakse LESS; to vam lahko prihrani nekaj prostora / pomnilnika na disku.
• Prav tako ne potrebujemo več prenosa in povezovanja knjižnice LESS.js v našo glavo HTML, kot smo to storili v našem zadnjem delu. Tako HTML dokument ostane čist in čist.
• Uporaba orodij za prevajanje, kot sta WinLESS in LESS.app, lahko takoj ustvari statični CSS izhod. Torej, če je sintaksa nekaj narobe, jo lahko takoj preučimo.
• Preset Mixins, kot LESS Elements, je naš najboljši prijatelj. Lahko res prihranimo čas, ko prevajamo dolgočasno lastnost CSS3.

.