Ako vyexportovať LESS do CSS

V predchádzajúcom článku som písal o LESS. V skratke je to rozšírené CSS o funkcie, premenné a dedičnosť, ale má jednu drobnú chybičku krásy. Užívateľ najskôr uvidí vašu stránku rozhodenú až ho momentu, kým JavaScript nesparsuje LESS. To pri väčších projektoch môže zabrať nejakú chvíľku a preto je dobré, keď vypúšťate projekt do sveta vyexportovať LESS do CSS. Otázka znie – ako?

Update – 18.1.2014

Nie dlho potom, čo som tento článok publikoval som narazil na dva oveľa elegantnejšie spôsoby.

1. Prepos App – vynikajúca malá aplikácia, ktorá kompiluje ako LESS, tak aj Coffeescript a hromadu ďalších. Vynikajúca voľba.
2. Skrz node.js – pracnejšia verzia, kde najskôr potrebujete nainštalovať node.js a cez NPM nainštalovať LESS plugin. V ďalšom kroku odporúčam nainštalovať si rozšírenie rovno do editora. Viac informácií nájdete priamo na stránkach LESS.

1. Aplikácie

Prvým riešením je použiť nejakú aplikáciu, ktorá to spraví za nás. Na internete som narazil na dve, veľmi zaujímavé aplikácie.

CodeKit - Je to aplikácia určená pre Mac OS X, vyzerá celkom slušne a ľudia si ju pochvaľujú
SimpLESS – Druhá aplikácia je per všetky platformy a má  roztomilý interface

Osobne som skúšal SimpLESS. Prostredie sa mi páčilo, bolo to celkom jednoduché ale mal som problém sparsovať Bootstrap. Vždy mi to hádzalo nejaké chyby, hoc v prehliadači mi to pekne fungovalo.

2. Webové stránky

Počas môjho Googlenia som narazil na stránku Lessify, ktorá pomocou PHP skompiluje  LESS. Bohužiaľ ani v tomto prípade som sa nedočkal žiadaného výsledku. Tu by mohla znieť rada, aby ste si sami prebehli Google, ale podľa mňa je to úplne zbytočné, existuje jedna úžasné ľahká cesta.

3. Google Chrome

Google Chrome v tomto prípade poskytuje jednu nehorázne dobrú featurku. Pointa je totiž v tom, že prehliadač predsa niekde musí mať uložený skompilovanú verziu súboru. A to miesto je Local Storage. Takže ako nato?

1. Otvorte si svoju stránku s LESS
2. Kliknite na ňu pravým tlačítkom myši a zvoľte “Preskúmať prvok”
3. Prepnite sa do druhej karty – “Resources”
4. Z ponuky napravo rozbaľte “Local Storage” (ja tam mám ešte položku Localhost)
5. Vidíte páry – Key – Value, nájdite ten svoj, a skopírujte pole Value do nového súboru
6. Skontrolujte si linky na obrázky (pozadí), na fonty a podobne
7. Uložte súbor

Je to jednoduchá procedúra, nevyžaduje žiadne špeciálne programy a máte istotu, že to čo vidíte, aj dostanete.

Záver

Trošku kratší príspevok, ale verím, že nápomocný.