Používejte LESS a výrazně zrychlete tvorbu CSS a celých webů

CSS3 přineslo mnoho vylepšení jak po grafické stránce, kdy v něm můžete aplikovat různé stínování nebo přechodové efekty, tak v oblasti zápisu. Nové selektory výrazně zjednodušují zápis stylů, nemusíte se s nakódováním grafiky tolik zdržovat a ve výsledku máte celý web hotov mnohem rychleji.

Schválně, přemýšleli jste někdy nad tím, kolik času vám v porovnání s dobami minulými  ušetří zápis typu .row:nth-child(odd){background: #ccc;} .row:nth-child(even){background: #fff;}?

CSS3 je fajn zrychlení, LESS pomůže ještě více

Svou práci při tvorbě kaskádových stylů si ovšem můžete zrychlit/ulehčit ještě mnohem více. Projekt LESS, za kterým stojí Alexis Sellier, je zpětně kompatibilní s CSS, takže stále u něj můžete používat vše, na co jste při psaní CSS zvyklí. Navíc však přidává možnost přímo v zápisu CSS používat proměnné, funkce, výpočty a další konstrukce.

Takové typické zrychlení práce, které mě napadlo při prvním setkání s LESS, byla definice barev coby proměnných. Určitě to také znáte: vytvoříte web nebo jej máte téměř dokončený a klient vás požádá o změny barev. Z vaší strany pak následuje procházení mnoha pravidel v rozsáhlém stylesheetu a úpravy. Máte-li jej vhodně strukturován, nebude jich tolik. Ti nejchytřejší (nebo nejlínější?) použijí v nějakém editoru funkci Najít a Nahradit.

Ovšem s použitím LESS vám stačí, abyste si na začátku jednotlivé barvy definovali do proměnných a ve zbytku stylesheetu pracovali už jen s těmito proměnnými. Nastane-li potřeba změnit barvu, změníte jen její definici u nastavení proměnné. Toť vše.

Podívejme se, co všechno nám tedy LESS umožní

Proměnné. Jak jsem již zmínil u příkladu s barvami, s použitím LESS můžete v CSS definovat proměnnou a přiřadí jí nějakou hodnotu. Může to být barva, stejně tak třeba definice velikosti písma. Důležité je vědět, že v aktuální verzi LESS k datu vydání tohoto článku se proměnné chovají spíše jako konstanty. Nemůžete do nich přiřazovat nové hodnoty někde níže ve stylesheetu, můžete je ale používat při výpočtech.

Příklad použití: @color: #ccc; .copyright{ color: @color; }

Mixins, recyklace již definovaných částí CSS. Zajímavé je využívání jiných definic CSS. V programovacím jazyce bych o přirovnal k refaktoringu. Řekněme, že máte CSS definici se selektorem nějaké třídy a teď ji chcete aplikovat i na něco jiného. Normálně byste všechna pravidla zkopírovali a opsali do dalšího selektoru. S použitím LESS stačí tu původní třídu vnořit jako definici do jiného selektoru.

Příklad použití: .rohy (@radius: 5px){ border-radius: @radius;} #boxik{ .rohy; }

Zanořená pravidla. Dalším zajímavým spořičem času přispívajícím i k přehlednosti zápisu je zanořování. Řekněme, že v #boxik máte nadpis h3 a odstavce textu. V běžném CSS byste tedy použili dva zápisy #boxik h3{...} a #boxik p{...}. Proč to ale tolikrát opakovat, když by šlo #boxik zmínit jen jednou? Navíc, čím hlubší zanoření jednotlivých prvků byste chtěli definovat, tím delší by zápis v CSS v porovnání s LESS byl.

Příklad použití: #boxik{ h3{ color: #000; } p{ color: #ccc; }}

Funkce a výpočty. Snad nejpozoruhodnějším vylepšením CSS v rámci LESS je použití výpočtů za pomoci JavaScriptového zápisu, který aplikujete přímo v zápisu stylů. Na to, jaký svět se vám touto možností otevírá, přijdete až po nějaké době práce s LESS, ale už nebudete chtít měnit. Zkusme si jednoduchý příklad, který pouze sčítá hodnoty barev u definicí proměnných.

Příklad použití: @red: #842210; @light-red: @red + #111111;

Jak LESS integrovat do webu?

LESS sám o sobě je JavaScriptová knihovna, kterou si stáhněte z webu lesscss.org (český překlad na lesscss.cz) a napojíte ji do hlavičky svého webu značkou <script>. Tu byste měli umístit až za případné definice klasických CSS stylesheetů i za definici stylesheetu se zápisem LESS. JavaScript se pak postará o zbytek.

<link rel="stylesheet/less" type="text/css" href="styles.less">

<script src="less.js" type="text/javascript"></script>

Všimněte si, že soubor se zápisem LESS má jen jinou koncovku než klasický stylesheet a u značky <link> je ještě specifikován atributem rel.

K dispozici je i možnost použití LESS přímo na straně serveru, návod najdete na zmíněném webu projektu.

Bude LESS fungovat bez JavaScriptu?

Odpověď na výše uvedenou otázku se nabízí - je to problém. Z podstaty věci vyplývá, že při vypnutém JavaScriptu se speciální zápisy LESS budou v prohlížeči chybně interpretovat. Pokud vám řešení, kdy prohlížeč dostává kód LESS a následně jej zpracovává JavaScriptem připadá nešťastné, koukněte na projekt lessphp.

Lessphp je kompilátor, který za pomoci PHP převádí zápis v souborech LESS na klasický CSS, jenž pak putuje do prohlížeče. Uživatel dostane již finální CSS, vy se pak nemusíte starat o to, co se stane v prohlížeči při vypnutém JavaScriptu. Zpracování LESS tedy díky jedné knihovně PHP proběhne přímo na straně serveru. Lessphp by měl být kompatibilní s aktuální verzí LESS.

Mimochodem, s využitím Lessphp můžete LESS používat i v Drupalu. Existuje na to modul LESS CSS Preprocessor. Ale samozřejmě nic vám nebrání v celkem pohodlném použití samotného LESS založeného na JavaScriptu.

LESS vs. SASS

LESS není jediný projekt svého druhu, který by umožňoval v CSS používat proměnné, operace, funkce a jiné konstrukce. Poměrně známý je také projekt Sass fungující podobně. Ten už ale potřebuje kompilátor, který převádí jeho zápis do výsledného CSS.

Abych se přiznal, LESS mi přijde o něco sympatičtější. Používá jej také Twitter ve svém projektu Twitter Bootstrap. Doporučuji vám LESS vyzkoušet, uvidíte, že vaše produktivita práce stoupne.