Instalace a Kompilace

V této části se dozvíte jak LESS preprocesor nainstalovat a jak zkompilovat LESS kód do CSS kódu. Jak preprocesor LESS nainstalovat vám zde ukážu přes NPM (node package manager) a také vám ukážu použití v prohlížeči. Co si vyberete záleží na vás.

Instalace a kompilace přes NPM

Pokud máme na svém počítači nainstalovaný NodeJS, tak můžete k instalaci LESS preprocesoru použít NPM.

Instalace

Máme v podstatě dvě možnosti instalace, buď si LESS nainstalujeme globálně a budeme jej mít k dispozici všude, nebo si ho nainstalujeme jen pro projekt na kterém budeme pracovat.

K instalaci LESS preprocesoru globálně můžeme použít následující příkaz: "npm install less -g".

Pokud si chceme LESS preprocesor nainstalovat jen pro projekt na který ho budeme používat, tak si nejdříve ve složce s naším projektem musíme vytvořit soubor package.json. Tento soubor si můžeme vytvořit tak, že se v příkazovém řádku přepneme do složky s naším projektem a napíšeme tento příkaz: "npm init -y". Poté si LESS do našeho projektu nainstalujeme následujícím příkazem: "npm install less --save-dev". Tento příkaz nám less nainstaluje (v našem projektu se objeví složka s názvem node_modules) a přidá nám do souboru package.json záznam o tom že jsme si LESS nainstalovali (to zajistilo to připsání --save-dev). Pokud bychom někdy v budoucnu složku node_modules třeba omylem smazali, tak můžeme LESS znova jednoduše nainstalovat zavoláním příkazu "npm install", protože máme v souboru package.json informaci o tom že se má LESS nainstalovat.

Kompilace

Ke kompilaci LESS kódu slouží příkaz lessc, můžeme ho použít v následujícím formátu: "lessc cesta-k-souboru-s-less-kódem cesta-kde-se-vytvoří-css-kód". Např.: "lessc ./less/main.less ./css/style.css". Pokud máme LESS nainstalovaný globálně, tak můžeme tento příkaz zavolat rovnou z příkazového řádku.

Pokud máme LESS nainstalovaný jen pro projekt na který ho budeme používat, tak si příkaz ke kompilaci musíme nejdříve napsat do souboru package.json než ho budeme moci použít. A pokud nebudeme chtít pokaždé když něco změníme tento příkaz volat, tak si k tomuto úkolu můžeme nainstalovat balíček nodemon, který se o to postará za nás. Nodemon můžeme nainstalovat následujícím příkazem: "npm install nodemon --save-dev". Jak příkaz ke kompilaci do souboru package.json napsat ukazuje následující ukázka kódu. Příkazy, které budeme chtít spouštět píšeme do položky scripts, kde napíšeme vždy název pomocí kterého příkaz budeme volat z příkazového řádku a příkaz samotný. V ukázce je také příkaz spouštějící nodemon, který když zavoláme začne sledovat soubory s koncovkou less a jakmile se nějaký změní provede kompilaci less kódu.

Když jsme si do souboru package.json napsali příkaz potřebný pro kompilaci LESS kódu, tak jej můžeme zavolat z příkazového řádku. Provedeme to příkazem "npm run název-pod-kterým-máme-příkaz-uložený". V ukázce jsme si příkaz pro kompilování LESS kódu pojmenovali "compile:less", takže bychom zavolali "npm run compile:less". Abychom nemuseli po každé změně spouštět tento příkaz ručně, tak jsme si do našeho souboru package.json přidali ještě příkaz, který spouští nodemon. Pokud bychom ho tedy chtěli zavolat a spustit tak nodemon, napíšeme: "npm run nodemon:compile:less". Po tomto volání už nebudeme muset příkaz pro kompilaci volat ručně, ale postará se o to nodemon když změníme nějaký soubor s koncovkou less. Až budeme chtít nodemon vypnout, tak v příkazovém řádku stiskneme Ctrl + C.

Instalace a kompilace v prohlížeči

LESS můžeme také kompilovat přímo v prohlížeči, stačí si jen stáhnout script, který to bude umět. Tento způsob se bohužel dá použít spíš jen po dobu tvorby webových stránek, neukládá nám totiž zkompilovaný CSS kód nikam do souboru, jen vždy LESS kód zkompiluje když načteme stránku.

Instalace

Pro kompilování LESS kódu v prohlížeči si budeme muset stáhnout script, který tuto operaci bude provádět. Tento script si můžete stáhnout zde. Poté co jsme si tento script stáhli, tak si jej přidáme do hlavičky (head elementu) naší webové stránky a můžeme namísto CSS kódu začít připojovat LESS kód.

Kompilace

LESS kód se při použití kompilace přes prohlížeč automaticky kompiluje při každém načtení stránky. Nevýhodou je, že se nevytváří žádný soubor, kde by se nám uložil zkompilovaný CSS kód, takže pokud budeme chtít CSS kód později uložit do souboru, budeme muset stejně použít NodeJS nebo nějaký jiný nástroj.

Pozn.: Pro kompilaci LESS kódu je na vašem počítači potřeba spustit webový server a webové stránky vytvářet tam, jinak to pravděpodobně nepůjde.

Konfigurace kompilace

Kompilace LESS kódu se dá různě nastavit. Různé možnosti nastavení najdete zde.

Ukázka kompilace LESS kódu

Na závěr této části bychom si ještě mohli ukázat jak LESS kód vůbec vypadá. V následující ukázce se nachází box s LESS kódem a box s CSS kódem. Porovnáním těchto dvou boxů s kódy možná uznáte že LESS je mnohem přehlednější a lepší na psaní.