CSS preprocesory

Preprocesory lze používat (kompilovat), několika způsoby. Pokud si chcete CSS preprocesory jen ošahat a vyzkoušet jejich syntaxi, doporučuji online testery. Kompilace pak může probíhat pomocí příkazové řádky, pomocí GUI aplikace nebo ve vašem oblíbeném IDE editoru.

Kompilace by však měla vždy probíhat na lokálním serveru vašeho počítače. Zbytečně nebudete zatěžovat váš hosting jak dotazy tak velikostí souborů, které budete neustále nahrávat. S kompilací na localhostu získáte to, že na web budete moci nahrát až konečný zminifikovaný CSS soubor, který bude mít minimální velikost a web se tak bude vmžiku načítat.

• LESS tester
• SASS tester
• Stylus tester

Kompilace v příkazové řádce probíhá obdobně jako instalace. Stačí zapsat jeden příkaz, určený pro váš preprocesor. Tato metoda je pro dost lidí nevyhovující a raději využijí hotových řešení, grafického rozhraní aplikací třetích stran. Pokud nepoužite příkaz --watch při kompilaci, bude musete při každé změně tento příkaz opakovat. Příkaz --watch zajistí, že bude sledovat každou změnu v preprocesoru, kterou ihned převede do css kódu.

lessc --watch styles.less > styles.css less

// překlad souborů z adresáře /css.sass do /css (včetně podadresářů)
sass --watch css.sass:css sass

// překlad souborů z adresáře /css.stylus do /css
stylus --watch css.stylus --out css stylus

Nejpohodlnější kompilace je pomocí aplikace, osobně využívám aplikaci Koala, která je zdarma a multi-platformní. Dále existují například Codekit nebo Prepros. Tyto aplikace zvládájí překládat všechny tři preprocesory, existují pak ještě aplikace přímo pro daný typ např. WinLESS.

Do programu jednoduše "Drag & Drop" vložíte vaší složku s webovým projektem.

Pokud si dobře všimnete, v seznamu stylopisů je aktivní pouze jeden, ostatní jsou zašedlé. Toto jsou zdrojové soubory tohoto webu, kde mám jeden main.less, do kterého veškeré parciální soubory importoju pomocí vnitřní funkce @import. Stačí mi pak když kompiluju tento jeden soubor, který již vše obsahuje, v právém sloupečku můžete vidět různá nastavení:

• Auto Compile - zajistí, že pokaždém uložení jakéhokoliv souboru less se automaticky zkompiluje výsledné css a zobrazení na webu se obnoví podle nového stylopisu
• Source map - vloží automaticky na konec css souboru mapu souboru
• Line Comments - užitečná funkce pokud potřebujete debugovat váš výsledný kód a chcete vědět na jakém řádku v less souboru se daná chyba nachází
• Strict Math a Strict Unit - Aktivací toho nastavení bude LESS počítač veškeré matematické funkce "striktně", a že bude kontrolovat jestli sčítáte stejné jednotky
• Autoprefix - Možnost automatického přidávání prefixových hodnot. Nedoporučuji, raději si vytvořte vlastní mixin, budete mít jistotu, že zápis bude správně a bude funkční ve všech prohlížečích

Pokud nestojí o aplikací třetích stran a používate některý z pokročilých IDE editorů, možná již preprocesory kompilovat dokáže. Kompilace většinou není součastí samotného editoru, ale jsou vytvořené pluginy, které po instalaci a správném nastavení budou plnit funkci GUI aplikace. Seznam editorů nabízí oficiálně pouze LESS zde. To, že SASS a Stylus nemají oficiální seznam neznamená, že to editory nezvládnou.

Ze zkušenosti vím, že to není problém pro Sublime, Atom, Eclipse a Netbeans.

Pomocí Package control, můžete v editoru Sublime Text 2, 3 a Atom nainstalovat plugin Less2Css. Který slouží právě ke kompilaci LESS souborů bez nutnosti instalace GUI aplikací nebo kompilace příkazovou řádkou.

Nastavení pluginu lze přes horní navigaci nebo editací settings souborů.

Jedná se o speciální funkci, kterou nabízí pouze preprocesor LESS. Stačí do hlavičky vašeho webové souboru vložit následují javascript knihovnu, spustit příkaz a vložit váš LESS soubor.

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"</script> less

Tento způsob se nedoporučuje na produkční verzi webů. Protože probíhá kompilace pomocí javascriptu, může mít buď uživatele javascript vypnutý nebo se malá chyba a javascript hodí chybu a soubor se nezkompiluje.

Nastavení scriptu pro správně fungování kompilace v prohlížeči:

LESS<script>
  less = {
    env: "production", // takto zustavaji CSSka v localStorage a je to rychlejsi, v pripade problemu zmenit na "development"
    async: true, // asynchronni
    poll: 10000 // refreshne se to jednou za 10s
  };
</script>
<script src="/js/lib/less.js" type="text/javascript"></script>
<script>less.watch();</script>

Nyní již máme preprocesory nainstalované a víme jak jejich kód zkompilovat, můžeme přejít na další kapitolu, která se věnuje syntaxi a funkcím preprocesorů.