LESS CSS na Mac OS X, alebo Ako písať menej CSS

Vďaka skvelému webovému magazínu Zdroják som sa prednedávnom dozvedel o tzv. CSS preprocesoroch, teda o niečom čo som si pri častom písaní CSS definícií zbožne želal ale nikdy mi nenapadlo pogúglovať či také niečo naozaj existuje. Existuje. Na úvod článku len veľmi stručne - CSS preprocesor je niečo, čo umožňuje obohatiť možnosti jazyka CSS o veci, ktoré uľahčujú jeho písanie a udržiavanie. Schválne - koľkokrát ste prepisovali celé CSS kvôli zmene jednej zo základných farieb dizajnu, prípadne prepočítavali šírky stĺpcov ak sa zmenila jedna z nich? Preprocesory, z ktorých najznámejšie sú Sass a LESS, túto prácu uľahčujú práve vďaka obohateniu jazyka CSS o premenné, vnorené štýly, aritmetické operácie a mnohé ďalšie barličky. V praxi to potom funguje takto: napíšete štýl v jazyku LESS, to bude s najväčšou pravdepodobnosťou súbor s príponou .less. Tento potom preženiete kompilátorom, ktorý vám "vypľuje" CSS, ktoré použijeme v projekte. Viac sa o týchto veciach dočítate v tomto článku, ja chcem teraz napísať len to, ako tento proces riešim ja na Mac OS X. Základ tvorí veľmi jednoduchá ale silná aplikácia less.app. Jednoduchosť spočíva v tom že jej stačí povedať v ktorom adresári sa nachádza môj projekt a to je vlastne zároveň všetko, čo musím spraviť. Aplikácia si sama prehľadá adresárovú štruktúru aby našla súbory s príponou .less a ak sa nachádzajú v adresári ktorý je na rovnakej úrovni s adresárom pomenovaným css, automaticky si ho nastaví ako výstupný adresár. To znie ako veľa vecí, ktoré musím dodržať aby mi aplikácia pracovala správne ale ja si skôr myslím že ide len o konvenciu, ktorú sa stačí naučiť prvýkrát a potom len dodržiavať, teda že sa z toho stane skôr príjemný zvyk. Takže odteraz budem mať v každom projekte o adresár less viac a bude na tej istej úrovni ako adresár css. Ideálne je potom ešte zaškrtnúť políčko Minify pre každý súbor a z výsledných CSS súborov budú odstránené všetky medzery a prázdne riadky. Aplikácia pracuje s Growl notifikáciami, takže po každom uložení .less súboru sa dozviete či bola kompilácia úspešná alebo nie. V nastavení aplikácie si tiež môžte zvoliť či ju chcete mať na očiach v Dock-u alebo v hornej lište vpravo - zvolil som druhú možnosť, pretože okno aplikácie prakticky nepotrebujem vidieť, ak si to všetko nastavím tak ako som napísal, správa sa len ako nejaký daemon na pozadí. Paráda. K dokonalosti mi chýbalo už len zvýrazňovanie syntaxe pre LESS. Používam TextMate ktorého bundles sú jednou z jeho silných stránok, takže nebol veľký problém nájsť príslušný LESS bundle, nakopírovať ho do adresára /Library/Application Support/TextMate/Bundles a v TextMate kliknúť na Bundles/Bundle Editor/Reload Bundles. Tento bundle obsahuje aj automatickú kompiláciu LESS zdrojového súboru pomocou kompilátora lessc a táto akcia je namapovaná na kombináciu kláves cmd+S, teda pri ukladaní súboru. Ak používate lessc kompilátor je všetko v poriadku, ale keďže ja ako kompilátor používam práve vyššiespomenutú less.app, túto možnosť som si neželal a tak som jednoducho v Bundle Editore len vypol tú klávesovú skratku. Teraz už stačí len podrobnejšie naštudovať ináč celkom jednoduché možnosti jazyka LESS a užívať si skutočne pohodlné písanie CSS. A možno ešte citát z oficiálnej stránky aplikácie less.app: If you're still building websites without it, you're an idiot.