Pracuje efektívne s LESS tipmi a nástrojmi

V našom predchádzajúcom výučbe sme sa naučili, ako používať LESS praktickým spôsobom pomocou aplikácií ako ChrunchApp na zostavenie kódu. Tentokrát budeme prechádzať niekoľkými praktickými tipmi, ktoré dokážu zvýšiť výkonnosť a produktivitu pri zostavovaní syntaxe LESS. Našim desktopom / pracovným prostredím nastavíme možnosť zvýraznenia syntaxe pre náš aktuálny editor pomocou automatických nástrojov na kompiláciu a využitím predvolených mixinov a ich synchronizáciu.

No, ak ste pripravení, začnime.

disclaimer: Nižšie uvedené tipy sú odvodené z mojej každodennej skúsenosti ako web dizajnér. Takže predtým, než budeme pokračovať ďalej, chcem načrtnúť, že tipy môžu vyhovovať niektorým dizajnérom a nie iným; rovnako ako každý iný tip, ktorý nájdete na webe. Napriek tomu dúfam, že môžete využiť tieto tipy.

1. Zvýrazňovač kódu

Ako sme už spomenuli, predstavili sme vás na ChrunchApp. Táto aplikácia však nemusí byť každým preferenciou webového dizajnéra. pretože každý dizajnér má svoje vlastné pracovné prostredie vrátane editora kódu podľa vlastného výberu.

Namiesto inštalácie iného editora kódu môžete skutočne používať aktuálny kód a umožniť zvýraznenie syntaxe. Takže v tomto príspevku sa budem podeliť o niekoľko tipov na pridanie zvýraznenia kódu MESS do 2 známych redaktorov: Vrcholový text 2 a notepad++.

Vrcholový text 2

Tento editor je momentálne mojou preferovanou voľbou, ktorá mi pomáha zostavovať kódy. Táto aplikácia je k dispozícii pre operačné systémy Windows, Linux a OSX, takže bez ohľadu na to, aký je váš operačný systém, budete stále môcť sledovať tento tip.

Teraz ju stiahnite z oficiálnych webových stránok a vyskúšajte tento editor. Potom si prečítajte nasledujúce pokyny, aby ste v ňom umožnili zvýraznenie farby LESS.

Poznámka: Pred sťahovaním si prečítajte licenciu, pretože bezplatná verzia je určená len na vyhodnotenie.

Inštalácia konzoly balíkov

Najskôr otvorte svoj vzácny text 2 a z tejto ponuky zobrazte konzolu Zobraziť> Zobraziť konzolu

Potom skopírujte a vložte do konzoly nasledujúci príkazový riadok a potom stlačte kláves Enter pre inštaláciu ovládacieho prvku balíka z wBond.net:

import urllib2, os; pf = "Balík Control.sublime-package"; ipp = sublime.installed_packages_path (); os.makedirs (ipp) ak nie os.path.exists (ipp) iný Žiadne; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); otvorený (os.path.join (IPP, PF), 'WB') .write (urllib2.urlopen ( "http://sublime.wbond.net/'+pf.replace (", '% 20')). čítať ()), vytlačiť 'Opätovné spustenie rekonštruovaného textu pre dokončenie inštalácie'

toto Balík konzoly nám pomôže nainštalovať zvýraznený balík.

Inštalácia balíka LESS-highlighting

Reštartujte Sublime Text 2 a z tejto ponuky zobrazte Paletu príkazov Nástroje> Paleta príkazov. Počkajte, až sa načíta zoznam balíkov. Potom zadajte Nainštalujte balík na vyhľadávanie a načítanie archívov balíkov.

Potom vyhľadajte balík LESS z úložiska a stlačte kláves Enter.

Počkajte minútu, kým sa načítava a nainštaluje balík, kým sa na stavovom riadku nezobrazí nasledujúce upozornenie.

Prejdite do ponuky Zobraziť> Syntax, v zozname by ste mali vidieť LESS. Znamená to, že podporuje Sublime Text 2 .menej a vaša LESS syntax by mala mať aj správne zvýraznenie farieb.

notepad++

Notepad ++ je Free, Open Source editor kódu a má mnoho užitočných pluginov na rozšírenie jeho funkčnosti. To je tiež široko používaný mnohými web designeri / vývojári najmä tí, ktorí pracujú s operačným systémom Windows. Takže som sa rozhodol zahrnúť aj tip pre pridanie LESS text zvýraznenie pre to.

Nainštalujte LESS-highlight v programe Poznámkový blok++

Povolenie farebného zvýraznenia v programe Notepad ++ je pomerne jednoduché.

Najskôr stiahnite balíček LESS pre Poznámkový blok ++ z tohto odkazu (userDefineLang_LESS.xml). Potom prejdite na položku Zobraziť> dialóg definovaný používateľom.

Zobrazí sa nasledujúce rozbaľovacie pole. Kliknite na tlačidlo Import ... a vyhľadať stiahnuté .xml súboru. Potom reštartujte program Poznámkový blok++.

Otvorte súbor .less a prejdite do ponuky Jazyk. Mali by ste teraz vidieť menej zahrnuté. Vyberte ju, ak chcete použiť farebné zvýraznenie v syntaxe LESS.

Viac zdrojov

Na trhu je mnoho ďalších redaktorov. Takže tu uvádzame niekoľko užitočných odkazov pre vás, ak nepoužijete žiadneho z vyššie uvedených editorov.

Adobe DreamWeaver

Nepochybne Dreamweaver má obrovskú užívateľskú základňu. Je k dispozícii pre Mac aj Windows. Takže ak používate tento editor, tu je jeden z dobrých zdrojov na inštaláciu minimálnej úrovne v Adobe DreamWeaver.

Coda

Ak používate Mac, pravdepodobne viete, že Coda je tento editor jedným z najpopulárnejších používateľov počítačov Mac. A tu je, ako môžete nainštalovať menej v Code.

geany

Je to jeden z najpopulárnejších editorov kódov medzi používateľmi systému Linux. Niektoré počítače v kancelárii, ktoré používajú Linux, tiež používajú Geany. Takže ak ho použijete aj vy, môžete zahrnúť zvýraznenie MALŠIE podľa pokynov na stránke SuperUser.com

2. LESS Compiler

Na rozdiel od ChrunchApp, ktorý má zabudovaný kompilátor LESS, ostatné editory ho nebudú mať štandardne. Napriek tomu existujú určité spôsoby, ako ho zahrnúť, ale je pre používateľov bežného používania skôr technický. Takže najlepším riešením je kompilácia pomocou nasledujúcich nástrojov: winless alebo LESS.app. WinLESS je kompilátor určený pre Windows, zatiaľ čo LESS.app je vytvorený pre OSX.

Tieto nástroje dokážu náš kód LESS previesť na statický CSS automaticky, keď súbor uložíme a nahlásime priamo, ak sa vyskytne chyba v kóde. No, dovoľte mi ukázať vám, ako má tento nástroj hrst:

Najprv by som chcel stiahnuť WinLESS a nainštalovať ho.

Kliknite na tlačidlo Pridať priečinok a vyhľadajte adresár, do ktorého ste vložili svoje .menej súbory (predpokladám, že ste už vytvorili aspoň jednu). Po pridaní jedného; WinLESS skenuje a nájde všetky .menej a zobrazí sa v zozname.

Prejdite do ponuky Súbor> Nastavenie, a skontrolujte, či sú tieto možnosti skontrolované;

• Automaticky kompilovať súbory po uložení
• Zobraziť správu v úspešnom zložení

Môžeme tiež nastaviť výstupný priečinok, ak ho chceme uložiť inde. Ale v tomto príklade ponecháme túto možnosť tak, ako je; čo znamená, že výstupný súbor bude uložený v rovnakom adresári ako .menej súbor.

Otvor tvoj .menej súbor z pridaného adresára, vykonajte niekoľko zmien a uložte ho.

Program WinLESS vás bude informovať o úspešnom zostavení súboru .css alebo ak došlo k chybe v kóde. Týmto spôsobom môžete skontrolovať priamo .css výstup, skôr ako čakať na dokončenie kódov na jeho kompiláciu.

Ak používate Mac, môžete použiť LESS.app, ktorý má rovnakú funkčnosť ako WinLESS.

Prednastavené mixy

V súčasných moderných postupoch webového dizajnu budeme používať vlastnosti CSS3 ako Gradient, Shadow alebo Border Radius, ktoré vyzerajú takto:

-webkit-okraj-polomer: 3px; -moz-okraj-polomer: 3px; polomer okrajov: 3px;

alebo

pozadie: -moz-linear-gradient (vrchol, # f0f9ff 0%, # a1dbff 100%); pozadie: -webkit-linear-gradient (vrchol, # f0f9ff 0%, # a1dbff 100%); pozadie: -o-lineárny gradient (vrchol, # f0f9ff 0%, # a1dbff 100%); pozadie: -ms-lineárny gradient (vrchol, # f0f9ff 0%, # a1dbff 100%); pozadie: lineárny gradient (vrchol, # f0f9ff 0%, # a1dbff 100%);

V predchádzajúcej príručke sme urobili niekoľko Mixins na zjednodušenie tejto syntaxe. Našťastie, niektorí ľudia v komunite webového dizajnu sú naozaj veľkorysí, aby si ušetrili čas na zostavenie týchto užitočných Mixinov, aby sme ich nemuseli zostavovať sami.

A jeden z mojich obľúbených je menej elementov, ktorý obsahuje veľa užitočných pravidiel CSS3. Teraz píšeme menej riadkov kódu z nudných predpôn predávajúceho.

Dobre, teraz, uvidíme, ako vám všetky tieto tipy naozaj pomôžu.

Dať ich dohromady

V tomto príklade budem vytvárať jednoduché prepojovacie tlačidlo. Najprv by som chcel vytvoriť nový dokument HTML a vložiť nasledujúcu prirážku:

     Klikni na mňa 

Vytvor styles.less ako náš hlavný štýl LESS, uložte ho do rovnakej zložky pomocou nášho dokumentu HTML a pridajte priečinok do programu WinLESS.

Importovať elements.less stiahli sme si pred použitím tejto syntaxe:

@import "elements.less";

Teraz môžeme použiť všetky Mixiny, ktoré sú dodávané z prvkov .stúpanie, .zaoblený, a .ohraničený. Som si istý, že meno Mixins je úplne samo vysvetľujúce.

Ďalej uveďte pravidlá LESS nižšie vo svojom štýle. A uložte to znova

 a zobrazenie: inline-block; polstrovanie: 10px 20px; farba: # 555; textová výzdoba: žiadne; gradient .bw (#eee, 240, 255); .rounded; .bordered; &: vznášať .bw-gradient (#eee, 255, 240);  

Od nášho .menej súbor bol pridaný do programu WinLESS, automaticky sa skompiluje .css. Teraz uvidíme výsledky.

Nie je to tak zlé, nie je to, vzhľadom na to, že toto tlačidlo bolo vytvorené s menším počtom riadkov, ako bolo potrebné. A tu je skutočný generovaný statický CSS:

 a zobrazenie: inline-block; polstrovanie: 10px 20px; farba: # 555; textová výzdoba: žiadne; pozadie: #eeeeee; pozadie: -webkit-gradient (lineárny, ľavý dolný, ľavý vrchol, farebný stop (0, # f0f0f0), farebný stop (1, #ffffff)); pozadie: -ms-lineárny gradient (spodné, # f0f0f0 0%, # f0f0f0 100%); pozadie: -moz-linear-gradient (stredové dno, # f0f0f0 0%, #ffffff 100%); -webkit-border-radius: 2px; -moz-okraj-polomer: 2px; okraj polomeru: 2px; -moz-background-clip: polstrovanie; -webkit-background-clip: padding-box; Klip na pozadie: výplň; hranica: solid 1px #eeeeee; border-left: solid 1px #eeeeee; border-right: solid 1px #eeeeee; spodná hranica: solid 1px #eeeeee;  a: vznášať sa na pozadí background: #eeeeee; pozadie: -webkit-gradient (lineárny, ľavý dolný, ľavý vrchol, farebný stop (0, #ffffff), farebný stop (1, # f0f0f0)); pozadie: -ms-line-gradient (spodná, #ffffff 0%, #ffffff 100%); pozadie: -moz-linear-gradient (stredné dno, #ffffff 0%, # f0f0f0 100%); 

V súhrne

Tu je stručný prehľad o tom, čo sme diskutovali v tomto príspevku:

• Povolením zvýraznenia syntaxe v našom aktuálnom editore nemusíte inštalovať ďalší editor len pre vytváranie syntaxe LESS; to vám môže ušetriť niektoré medzery / pamäť na vašom disku.
• Taktiež už nie je potrebné prevziať a prepojiť knižnicu LESS.js do našej sekcie HTML, ako to bolo v našom poslednom výučbe. Týmto spôsobom je náš dokument HTML čistý a čistý.
• Použitie nástrojov na kompiláciu ako WinLESS a LESS.app dokáže okamžite generovať statický výstup CSS. Takže ak je syntax niečo zle, môžeme to ihneď preskúmať.
• Prednastavené mixy ako LESS Elements sú našimi najlepšími priateľmi. To môže naozaj ušetriť čas pri zostavovaní nudnej vlastnosti CSS3.

.