Efektivní práce s LESS tipy a nástroji

V našem předcházejícím tutoriálu jsme se naučili, jak používat LESS praktickým způsobem využitím aplikací jako ChrunchApp pro kompilaci kódu. Tentokrát budeme procházet několik užitečných tipů, které budou schopny zvýšit výkon a produktivitu při kompilaci syntaxe LESS. Nastavíme desktop / pracovní prostředí tak, že umožníme zvýraznění syntaxe pro našeho současného editoru pomocí automatických kompilátorových nástrojů a využití přednastavených Mixinů..

Pokud jste připraveni, začněme.

Prohlášení: Níže uvedené tipy jsou odvozeny z mé každodenní zkušenosti jako web designer. Předtím, než jím projdeme dál, chci nastínit, že tipy by mohly vyhovovat některým návrhářům a ne jiným; stejně jako jakýkoli jiný tip, který najdete na webu. Nicméně doufám, že z následujících tipů můžete sklízet něco užitečného.

1. Zvýrazňovač kódu

Jak jsme se zmínili dříve, představili jsme vás ChrunchApp. Tato aplikace však nemusí být preferencí každého webového designéra; protože každý projektant má své vlastní pracovní prostředí, včetně editoru kódů podle svého výběru.

Namísto instalace jiného editoru kódu můžete ve skutečnosti stále používat svůj stávající kód a povolit v něm zvýraznění syntaxe. V tomto příspěvku se tedy podělím o několik tipů, které přidají kód LESS zvýrazněný do 2 známých textových editorů: Sublime Text 2 a poznámkový blok++.

Sublime Text 2

Tento editor je v současné době mou preferovanou volbou, která mi pomůže vytvořit kódy. Tato aplikace je k dispozici pro Windows, Linux a OSX, takže bez ohledu na váš operační systém, budete stále moci sledovat tento tip.

Nyní si to stáhněte z oficiálních stránek a zkuste tento editor. Poté si přečtěte následující pokyny, abyste v něm umožnili zvýraznění barvy LESS.

Poznámka: Před stažením se ujistěte, že jste si přečetli licenci, protože bezplatná verze je určena pouze pro hodnocení.

Nainstalujte balíček konzoly

Nejprve otevřete Sublime Text 2 a z této nabídky zobrazte konzolu Zobrazit> Zobrazit konzolu

Poté zkopírujte a vložte následující příkazový řádek do konzoly a poté stiskněte klávesu Enter, abyste nainstalovali ovládací prvek balíčku z webu wBond.net:

import urllib2, os; pf = "Package Control.sublime-package"; ipp = sublime.installed_packages_path (); os.makedirs (ipp) pokud ne os.path.exists (ipp) else None; 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 ')). read ()); print 'Prosím restartujte Sublime Text pro dokončení instalace'

Tento Konzola pro balíček nám pomůže nainstalovat balíček pro zvýraznění.

Instalace balíku LESS-highlighting Package

Restartujte Sublime Text 2 a z této nabídky zobrazte příkaz Paleta příkazů Nástroje> Paleta příkazů. Počkejte, až se načte seznam balíčků. Potom zadejte Instalovat balíček vyhledávat a načítat repozitáře balíků.

Pak vyhledejte balíček LESS ze seznamu úložišť a stiskněte klávesu Enter.

Počkejte chvíli, než Sublime Text 2 stáhne a nainstaluje balíček, dokud se na stavovém řádku nezobrazí následující upozornění.

Přejděte do nabídky Zobrazit> Syntaxe, měli byste vidět LESS v seznamu. To znamená, že Sublime Text 2 podporuje .méně a vaše syntaxe LESS by také měla mít správné zvýraznění barev.

poznámkový blok++

Notepad ++ je Free, Open Source editor a má mnoho užitečných pluginů pro rozšíření jeho funkčnosti. To je také široce používán mnoha web designéry / vývojáři, zejména ti, kteří pracují s operačním systémem Windows. Takže jsem se rozhodl také zahrnout tip pro přidání textu LESS pro zvýraznění textu.

Nainstalujte LESS-zvýraznit v poznámkovém bloku++

Povolení zvýraznění barvy v programu Notepad ++ je poměrně snadné.

Z tohoto odkazu (userDefineLang_LESS.xml) si stáhněte balíček LESS pro Notepad ++. Pak jděte na Zobrazení> Dialog definovaný uživatelem.

Zobrazí se následující vyskakovací okno. Klepněte na tlačítko Import… a najděte stažený soubor .xml soubor. Potom restartujte Poznámkový blok++.

Otevřete soubor .less a přejděte do nabídky Jazyk. Nyní byste měli vidět LESS včetně. Vyberte ji, abyste aplikovali zvýraznění barev na syntaxi LESS.

Další zdroje

Existuje mnoho dalších redaktorů na trhu. Proto zde uvádíme některé užitečné odkazy, pokud nepoužíváte žádný z výše uvedených editorů.

Adobe DreamWeaver

Dreamweaver má nepochybně obrovskou uživatelskou základnu. Je k dispozici pro systémy Mac i Windows. Pokud tedy používáte tento editor, zde je jeden z dobrých zdrojů pro instalaci programu LESS v aplikaci Adobe DreamWeaver.

Coda

Pokud používáte Mac pravděpodobně znáte Codu, tento editor je jedním z nejpopulárnějších mezi uživateli Mac. A zde je, jak můžete nainstalovat LESS v Coda.

Geany

Je to jeden z nejpopulárnějších editorů kódu mezi uživateli Linuxu. Některé počítače v mé kanceláři, které běží na Linuxu, používají také Geany. Takže pokud ho použijete také, můžete zahrnout LESS zvýraznění podle tohoto návodu na SuperUser.com

2. LESS kompilátor

Na rozdíl od ChrunchApp, který má vestavěný LESS kompilátor, ostatní editory jej nebudou mít ve výchozím nastavení. Ačkoli existuje několik způsobů, jak to zahrnout, ale je to spíše technické pro obecné uživatele. Takže nejlepší řešení, které mám, je provést kompilaci pomocí následujících nástrojů: WinLESS nebo LESS.app. WinLESS je kompilátor určený pro Windows, zatímco LESS.app je vytvořen pro OSX.

Tyto nástroje mohou automaticky převést náš LESS kód do statického CSS, protože soubor uložíme a přímo hlásíme, pokud je v kódu chyba. Dovolte mi, abych vám ukázal, jak je tento nástroj užitečný:

Nejprve bych chtěl stáhnout WinLESS a nainstalovat jej.

Klikněte na tlačítko Přidat složku a najděte adresář, kam jste umístili .méně soubory (předpokládám, že jste již vytvořili alespoň jeden). Jakmile ho přidáte; WinLESS bude skenovat a najít všechny .méně a zobrazí se v seznamu.

Přejděte na nabídku Soubor> Nastavení, a zkontrolujte, zda jsou tyto možnosti zaškrtnuty;

• Při uložení automaticky zkompilovat soubory
• Zobrazit zprávu o úspěšném kompilaci

Můžeme také nastavit výstupní složku, pokud ji chceme uložit jinam. V tomto příkladu však tuto možnost opustíme tak, jak je; což znamená, že výstupní soubor bude uložen ve stejném adresáři jako .méně soubor.

Otevři tvůj .méně soubor z přidaného adresáře, proveďte několik změn a uložte jej.

WinLESS vás upozorní, když byl soubor úspěšně zkompilován .css nebo pokud je v kódech chyba. Tímto způsobem můžete zkontrolovat výstup .css přímo, místo toho, abyste museli čekat na dokončení kódování.

Pokud používáte Mac, můžete použít LESS.app, který má stejnou funkcionalitu jako WinLESS.

Přednastavené Mixiny

V současných moderních praktikách webového designu použijeme vlastnosti CSS3 jako Gradient, Shadow nebo Border Radius, které vypadají takto:

-webkit-border-radius: 3px; -moz-border-radius: 3px; hraniční rádius: 3px;

nebo

pozadí: -moz-lineární gradient (horní, # f0f9ff 0%, # a1dbff 100%); pozadí: -webkit-lineární gradient (horní, # f0f9ff 0%, # a1dbff 100%); pozadí: -o-lineární gradient (horní, # f0f9ff 0%, # a1dbff 100%); pozadí: -ms-lineární gradient (horní, # f0f9ff 0%, # a1dbff 100%); pozadí: lineární gradient (horní, # f0f9ff 0%, # a1dbff 100%);

V našem předchozím tutoriálu jsme vytvořili několik Mixinů pro zjednodušení této syntaxe. Někteří lidé v komunitě webového designu jsou naštěstí dostatečně velkorysí, aby si ušetřili čas na kompilaci těchto užitečných Mixinů, abychom je nemuseli kompilovat od nuly..

A jeden z mých nejoblíbenějších je Méně prvků, který obsahuje mnoho užitečných přednastavených pravidel CSS3. Nyní tedy zapisujeme méně řádků kódu z nudných předpon dodavatelů.

Dobře, teď, podívejme se, jak mohou všechny tyto tipy opravdu pomoci.

Uvedení všech dohromady

V tomto příkladu budu vytvářet jednoduché odkazové tlačítko. Nejdříve bych chtěl vytvořit nový HTML dokument a umístit následující přirážku:

     Klikni na mě 

Vytvořit bez stylů jako náš hlavní LESS stylesheet, uložte ji do stejné složky s naším HTML dokumentem a přidejte složku do WinLESS.

Importovat elements.less stáhli jsme ji před použitím této syntaxe:

@import "elements.less";

Nyní můžeme použít libovolné Mixiny poskytované z prvků .spád, .zaoblený, a .hraničí. Jsem si jistý, že název Mixins je zcela samozřejmý.

Dále, vložte níže uvedená pravidla LESS do svého stylu. A ještě jednou ho uložte

 a zobrazení: inline-block; polstrování: 10px 20px; barva: # 555; text-decoration: žádný; b-gradient (#ee, 240, 255); .zaoblený; . &: hover .bw-gradient (#eee, 255, 240);  

Od našeho .méně soubor byl přidán do WinLESS, bude automaticky zkompilován .css. Podívejme se nyní na výsledky.

No, není to tak špatné, nehledě na to, že toto tlačítko bylo vytvořeno s menším počtem čar, než bylo potřeba. A zde je skutečný generovaný statický CSS:

 a zobrazení: inline-block; polstrování: 10px 20px; barva: # 555; text-decoration: žádný; pozadí: #eeeeee; pozadí: -webk-gradient (lineární, levý dolní, levý horní, barevný stop (0, # f0f0f0), barevný stop (1, #ffffff)); pozadí: -ms-lineární gradient (dolní, # f0f0f0 0%, # f0f0f0 100%); pozadí: -moz-lineární gradient (střední dno, # f0f0f0 0%, #ffffff 100%); -webk-border-radius: 2px; -moz-border-radius: 2px; hraniční rádius: 2px; -moz-background-clip: polstrování; -webkit-background-clip: výplň-box; pozadí-klip: polstrování; border-top: pevná 1px #eeeeee; border-left: pevná 1px #eeeeee; vpravo-hrana: pevná 1px #eeeeee; border-bottom: pevná 1px #eeeeee;  a: hover background: #eeeeee; pozadí: -webk-gradient (lineární, levý dolní, levý horní, barevný stop (0, #ffffff), color-stop (1, # f0f0f0)); pozadí: -ms-lineární gradient (dolní, #ffffff 0%, #ffffff 100%); pozadí: -moz-lineární gradient (středové dno, #ffffff 0%, # f0f0f0 100%); 

Celkem

Zde je stručný přehled toho, co jsme v tomto příspěvku diskutovali:

• Povolením zvýraznění syntaxe v našem aktuálním editoru nemusíme instalovat další editor pouze pro skládání syntaxe LESS; to může ušetřit nějaké mezery / paměť na disku.
• Také nemusíme stahovat a propojovat knihovnu LESS.js do sekce HTML, jak jsme to dělali v našem posledním kurzu. Tímto způsobem zůstane náš HTML dokument čistý a čistý.
• Použití nástrojů kompilátoru jako WinLESS a LESS.app může generovat statický výstup CSS okamžitě. Takže, pokud je něco v nepořádku se syntaxí, můžeme to okamžitě prozkoumat.
• Preset Mixins jako LESS Elements je náš nejlepší přítel. To může opravdu ušetřit náš čas při kompilaci nudné vlastnosti CSS3.

.