První kroky s Less.js

Vývoj webových aplikací nás vede mnoha cestami, ale všechny tyto cesty mají jednu společnou věc: kód HTML a kód CSS, což nám dává mnoho možností, aby naše aplikace vypadaly tak, jak chceme nebo jak si představujeme.
Co se nyní děje, je to, že protože každý člověk má svůj způsob vývoje, mnohokrát jsou výsledné kódy velmi rozsáhlé nebo poněkud chaotické, což způsobí, že údržba a výkon budou trochu ovlivněny. Zde přicházejí na řadu knihovny a předprocesory, které nám pomáhají psát o něco čistší a efektivnější kód, což také pomáhá týmové práci, protože mnoho z těchto knihoven nás nutí psát lepší kód.
Less.jsnázev Less.js pochází ze spojení slov CSS Leaner, něco jako CSS tenčí nebo zmenšené, což nám již dává představu o tom, co tento předprocesor udělá, což není nic jiného než nám pomoci napsat méně kódu CSS, a tím zlepšit čitelnost a výkon našich aplikací a webových stránek. Je to založeno na JavaScript takže jej můžeme použít buď na straně klienta, ačkoli tato praxe není doporučena pro produkci, nebo také ze strany serveru díky npm a Node.js, takže se může stát doplňkem některých JavaScriptový rámec že v tuto chvíli řídíme.
Hlavní myšlenka k přijetí Less.js v našem vývojovém prostředí, je pomoci splnit tuto zásadu SUCHÝ, což znamená neopakovat se a dosáhnout toho Less.js obsahuje funkce, třídy a proměnné, které nám umožňují psát mnohem více opakovaně použitelného kódu, než jaký bychom psali CSS přímo.
1- Potřebujeme moderní prohlížeč, který dokáže interpretovat příklady, kterými se budeme zabývat, to může být Google Chrome nebo Firefox Developer Edition.
2- Musíme mít textový editor ve stylu od Sublime Text nebo NotePad ++, abychom mohli pohodlněji psát naše příklady.
3- Nakonec potřebujeme oprávnění k instalaci prvků prostřednictvím příkazové konzoly a připojení k internetu pro stažení potřebných zdrojů.
InstalaceInstalace Less.js To lze provést dvěma způsoby, prvním přímo na úrovni klienta a druhým v serverovém prostředí, jako je Node.jsPodívejme se na každý z těchto způsobů níže.
Tato forma instalace je stejně snadná jako volání souboru, který obsahuje knihovnu Less.js, a to je prostě již zahrnuto v našem prostředí. Ke stažení knihovny stačí přejít na stránku lesscss.org a stáhnout nejnovější stabilní verzi.

ZVĚTŠIT

Jakmile máme stažený soubor, můžeme pokračovat v malém příkladu, který nám pomůže zjistit, zda máme prostředí připravené k vývoji pomocí Less.jsProto musíme provést následující kroky:
1- Vytvoříme složku a uvnitř vytvoříme soubor s názvem index.html, pak najdeme soubor less.min.js uvnitř složky dist verze Less.js které jsme stáhli, navíc vytvoříme soubor s názvem styly. bezStruktura toho, co jsme popsali, by měla vypadat následovně:

2- Pak napíšeme následující kód níže do našeho index.html abychom měli něco, co můžeme použít CSS a tak zkontrolujte styly:

 První kroky s Less.js Naše hlavička Obsah Naše zápatí

Zde vidíme především strukturu HTML základní, kde v rámci tělo umístili jsme štítek záhlaví, štítek sekce a nakonec štítek zápatí, to nám dává tři zcela odlišné prvky, na které můžeme aplikovat styly CSS.
3- Nyní uvnitř štítku hlava z předchozího kódu začleníme náš soubor styly. bez a po tomto zahrnutí souboru less.jsV tomto bodě je velmi důležité to zdůraznit less.js bude vždy zahrnut po našich souborech .méně které styly unesou, a je také důležité si uvědomit, že soubory .méně který zahrneme, musí mít atribut rel jak následuje: rel = "styly / méně" protože bez toho kompilátor méně nebudou vědět, že s tímto souborem musí pracovat. Podívejme se, jak bude naše značka head vypadat s dalším kódem, který se přidá do kódu z předchozího kroku:

 První kroky s Less.js 

4- Nyní musíme přidat nějaké styly CSS uvnitř souboru styly. bez, níže uvedený kód rozlišuje různé štítky, které vytváříme, různými barvami:

 záhlaví {barva: modrá;} sekce {barva: šedá;} zápatí {barva: žlutá;}

5- Pokud otevřeme naše index.html pomocí prohlížeče uvidíme, jak se styl změnil, a pokud otevřeme vývojářskou konzolu, uvidíme zprávy, které vytiskne less.js Abychom věděli, že to funguje, podívejme se na následujícím obrázku, jak to vypadá:

Můžeme dokonce udělat trochu hlouběji cvičení a můžeme otevřít zdrojový kód našeho příkladu v prohlížeči a zjistit, jak less.js vygeneroval kód CSS v našem dokumentu, který nezahrnujeme:

Na straně serveruInstalace na straně klienta je velmi užitečná, když vyvíjíme, protože nám umožňuje provést určitý druh ladit v reálném čase, takže pozorujeme změny v daném okamžiku, ale pro produkční prostředí se to vůbec nedoporučuje, v první řadě ztrácíme čas, zatímco Less.js generuje šablony stylů, a zadruhé proto, že nahrajeme naše soubory .méně které mohou kopírovat jiní lidé. Proto nyní uvidíme, jak s ním pracovat Less.js při instalaci kompilátoru k tomu použijeme správce balíčků npm.
Musíme mít instanci funkční npm, proto doporučujeme nainstalovat nejnovější verzi Node.js pro náš operační systém.
Také potřebujeme dostatečná oprávnění, abychom mohli instalovat balíčky s npm, a provádět pokyny na úrovni příkazové konzoly, je to velmi důležité zejména v prostředích Linux Y Mac, takže v Okna povolení se na této úrovni zpracovává snáze.
1- Z příkazové konzoly musíme provést následující instrukci pomocí npm:

 npm install -g less

2- Předchozí krok nás přiměl nainstalovat kompilátor Less.js, volala lessc„To dělá to, že transformuje náš kód méně v platném kódu CSS pro použití v prohlížeči, takže jej otestujeme, proto vytvoříme soubor s názvem příklad. bez s následujícím kódem uvnitř:

 @color: blue; .highlight () {color: @color;} p {.highlight ();}

3- Jakmile je výše provedeno, přejdeme na naši konzolu a provedeme následující instrukci pro vygenerování souboru .css kde bude náš kompilovaný kód spočívat:

 lessc example.less> example.css

V našem výsledném souboru získáme to, co vidíme na následujícím obrázku:

Pokud chceme komprimovaný výsledek popř minifikované stačí přidat -x parametr po zavolání lessc jako následující:

 lessc -x example.less> example.css

Co nám dává následující minifikovaná css jako výsledek:

V posledním příkladu instalací podle způsobu použití jsme viděli, že umístit barvu na jednoduchý štítek p děláme několik věcí, nejprve definujeme barevnou proměnnou pomocí @ modifikátor, to znamená, že můžeme v našem dokumentu volat barvy nebo hodnoty v rámci proměnných, abychom mohli mít proměnnou @colorTitle a díky tomu víme, že kdekoli chceme použít barvu titulku, uskutečníme pouze toto volání.
Opakovaně použitelné rutinyDalší věc, kterou jsme viděli, bylo, že jsme vytvořili funkci s názvem .zvýraznit () a dovnitř umístíme atribut CSS a její hodnota byla naše proměnná, toto je další příklad toho, jak můžeme v rámci našich stylů vytvářet opakovaně použitelné rutiny, takže v jakékoli třídě nebo atributu, na který chceme něco upozornit, prostě musíme tuto funkci nazvat tak, jak jsme to udělali uvnitř prvku p v příklad.
Vidíme tedy, že důležitost Less.js je, že nám pomáhá přemýšlet více o tom, jak dělat méně, a tak vyústit v komprimovaný, platný a snadno čitelný kód na konci, v příkladu by se dalo říci, že hodně bylo napsáno za tak málo CSS což má za následek, ale myšlenka je taková, že když musíme dělat hodně CSS, píšeme méně, takže to vidíme Less.js ukazuje se, že když děláme velké šablony stylů.
Tím tento tutoriál dokončujeme, naučili jsme se s ním provádět první kroky Less.js, takže nyní máme dobré nástroje, abychom mohli vytvářet skvělé aplikace nebo webové stránky s použitím co nejmenšího množství kódu.