Co vás napadne když řeknu CSS? Dlouhé psaní stovek řádků kódu ve kterém se po několika týdnech práci nevyznáte? Zdlouhavé úpravy jeho částí a časté kopírování zápisu zvolené barvy? Například já když jsem psal jeden z prvních projektů jsem neznal způsob jak si práci ulehčit a barvu, kterou jsem používal v projektu na mnoho prvků si pamatuji do dnes (#99b028). Často jsem nadával a přemýšlel a nakonec i vymyslel metodu jak si ulehčit práci a generovat css pomocí PHP. To byly začátky s programováním a dnes jsem rád že mě zdlouhavá práce neodradila. Dnes je ale už původní kód těžko někde k sehnání, ale jsem se naučil používat nástroje, které jsou již připravené k ulehčení života programátorů.

Nejčastěji používaných nástrojů, pro usnadnění práce se soubory CSS je LESS a SASS. Já používám LESS a také o něm dneska budu mluvit. Tím nechci naznačit něco jako že LESS je lepší než SASS, prostě ho používám a nejspíš také proto, že jsem se k LESS dostal dříve.

Hned v úvodu chci ukázat příklad na kterém je znázorněno to o čem jsem mluvil v úvodu tohoto článku a to zápis barvy. Pokud bych chtěl v klasickém CSS nastavit barvu všech nadpisů na #b3b3b3 musel jsem napsat něco takového:

Problém je v tom, že pokud chci následně barvu změnit, musím kliknout na oba řádky s barvou a ty následně změnit. V LESS si ale můžu usnadnit práci následovně:

Není to lepší ?

Další z vychytávek je se strukturování zápisu CSS kódu podobně jako samotné HTML. Než to popisovat raději to ukážu na příkladu:

Co se vám zdá jednodušší? Mě tedy druhý způsob! LESS mě odnaučil používat zbytečné třídy v zápisu stránky, protože jsem byl vždy líný psát zápis typu:

ale bylo pro mě jednodušší přiřadit třídu a tu stylovat pomocí CSS.

Cílem článku není vám přepsat celou dokumentaci LESSu ale ukázat způsob, jak si ulehčit práci při tvorbě i jednoduché webové prezentace, proto si budete další možnosti LESS nastudovat sami.

Jak tedy “zapnout” podporu pro kompilaci LESS zápisu na CSS?

Na stránkách lesscss.org naleznete jednoduchý návod jak pomocí javascriptu s LESS kompilátorem pracovat. Pokud ale preferujete PHP kompilaci stejně jako já, doporučuji leafo.net, kde máte vysvětleno jak kompilovat LESS na CSS pomocí  PHP.

Musím ale upozornit že pokud nezapnete cachování stránek tak bude tento PHP kód vytěžovat traffic webu, v tom případě doporučuji po skončení vývoje zkompilovat kód a následně ho vložit jako čisté CSS, a LESS soubor si někde schovat pro případné úpravy.

Ještě na závěr dodám že pro Nette framework existuje modul, který kompilaci LESS přidává a práce je pak jedna radost.