LESS: stejné CSS za méně peněz

LESS logo

Kaskádové styly jsou dnes až na výjimky přijímány jako standard pro popis vizualizace formátu hypertextových dokumentů. Koncepce jednoduchého popisu s sebou ale nese některé nevýhody, které se snaží překonat různé nadstavby a preprocesory. Jedním z nich je LESS, který si představíme v dnešním článku.

LESS, tedy Leaner CSS, je knihovna, která je možná známa programátorům v Ruby. Zavádí do CSS některé vlastnosti, známé z programovacích jazyků, jako jsou „proměnné“, „výrazy“ nebo „makra“ (termíny berte, prosím, v uvozovkách). Kromě implementace v samotném Ruby je dostupná i implementace v JavaScriptu, kterou publikoval Dmitrij Fadějev pod názvem less.js, nebo PHP implementace LESS PHP.

K čemu je LESS?

Začneme nikoli teorií, ale skočíme přímo in medias less. S preprocesorem LESS můžeme napsat CSS pravidla např. takto:

@the-border: 1px;
.rounded_corners (@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}
#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
  .rounded_corners;
}
#footer {
  .rounded_corners(10px);
}

I bez hlubšího vysvětlování je každému, kdo se kdy setkal s programováním, zhruba zřejmé, oč se tu jedná. V jedné ukázce je vidět vytvoření „pojmenované konstanty“ @the-border, pojmenované sady pravidel („makra“) .rounded_corners, včetně použití parametru @radius s přednastavenou hodnotou, a jejich využití.

Podobný zápis samosebou nedokáže prohlížeč sám o sobě zpracovat. O přetvoření výše uvedeného zápisu na čisté CSS se stará právě preprocesor LESS. Vznikl, jak jsme si už řekli, v prostředí Ruby (jeho předchůdcem byl např. známý Sass) a záměrem autorů bylo zjednodušit zápis pravidel v CSS a především usnadnit jejich správu zavedením některých principů, známých z programovacího jazyka.

Prasárna!

Slovo z mezititulku se v komentářích na Zdrojáku vyskytuje poslední dobou velmi často; téměř pravidlem bývá u neobvyklých řešení. Tohoto hrdého označení se tak dostává všem tématům, co jsou nová, nečekaná, inovativní či zkrátka „jiná“. Byl jím poctěn JavaScript, Node.js, a ani LESS nezůstal stranou (viz). K tomuto přístupu se ještě někdy vrátíme a zasadíme si jej do kontextu vývojářství; teď se spíš věnujme tomu, zda je LESS opravdu, řekněme, ideově pochybený a špatný.

Diskuse o tom, zda do CSS zavést proměnné, výrazy či makra probíhají už mnoho let a padá v nich mnoho argumentů pro i proti. Zjednodušeně řečeno jsou pro ti, co s tím musí denně pracovat, proti pak ti, kterým leží na srdci formální čistota jazyka. Autoři LESS patří evidentně do té první kategorie.

Každý CSS kodér ví, že stylopis bývá plný například „magických konstant“, rozmístěných na různých místech, leckdy i v různých souborech, a případná změna tak není vždy triviální; leckdy změna jednoho rozměru jednoho prvku znamená dopočítávání okrajů u několika dalších prvků, změnu odsazení u jiných a další čas na odladění. U středně rozsáhlého projektu se vždy vynoří otázka „Změnil jsem to opravdu všude, kde je potřeba?“ A právě pro takové situace je vhodné použití CSS preprocesoru.

Použití preprocesoru je i v CSS stejné jako v jakémkoli jiném jazyce: Zjednodušuje zápis, a tím i správu některých konstrukcí, za cenu toho, že před vlastním zpracováním je nutné „předzpracování“, které tyto konstrukce nahradí validním zápisem. Možná to někomu připadá jako „znásilňování principů jazyka“, ale je na místě připomenout, že makra, konstanty, podmíněné bloky či vkládání souborů (#include), bez nichž si nedovedeme představit programování v jazyce C, byly původně také řešeny preprocesorem cpp – tolik k ideové čistotě použití preprocesoru.

A teď se s těmi, kterým leží na srdci spíš snadná použitelnost a správa zdrojových kódů než ideová čistota použitých prostředků, podíváme na možnosti LESS.

Co přináší LESS pro CSS kodéry?

Preprocesor LESS nabízí možnost zapsat do CSS kódu proměnné, makra, zanořené definice a další věci, které bychom mohli považovat za „syntaktický cukr“. Nepřidává tedy nové funkce pro popis vzhledu, ale zjednodušuje či zpřehledňuje v některých případech zápis pravidel.

Proměnné

Měli bychom spíš říct „pojmenované konstanty“, ale terminologie dokumentace LESS hovoří o proměnných (variables), přidržíme se tedy jí. V dokumentaci je uveden příklad, z něhož je patrný zápis i použití proměnných:

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }

Jméno proměnné (pojmenované konstanty, viz výš) začíná znakem @ a podléhá stejným pravidlům jako např. jména tříd. Za jménem je dvojtečka a hodnota, ukončená středníkem. Hodnotou může být i jednoduchý výraz. Ve výše uvedeném příkladu bude mít proměnná @light-blue hodnotu proměnné @nice-blue, zvýšenou o #111 (což je zkrácený zápis pro #111111). poslední řádek bude tedy vyhodnocen jako

#header { color: #6c94be; }

Mixins

Autoři označují tuto vymoženost slovem „mixins“, my si můžeme její fungování přiblížit termínem makro s parametrem.

Bez parametru je zápis mixinu stejný jako zápis pravidel pro určitou třídu či id. Můžeme zapsat jedno či více pravidel, a pak je použít jako „pojmenovanou sadu“. Například:

.okraje { border-top: 2px dotted black;
          border-bottom: 2px dotted blue;
        }
#header li {
             color: #eee;
             .okraje;
           }

Tedy lze sadu pravidel pro nějakou třídu (či id) vložit přímo do jiné sady pravidel. Mixin může mít parametry, jako v následujícím příkladu:

.debug (@barva: #f00) {
          border: 2px solid @barva;
        }
#header li {
             color: #eee;
             .debug;
           }
#content p {
             .debug(#00f);
           }

Můžeme tak snadno zapisovat nejen sady pravidel s různými vendor prefixy, jak bylo naznačeno v úvodním příkladu na začátku článku, ale můžeme jej např. použít pro ladění – v ostré verzi bude seznam pravidel pro třídu .debug prázdný a do výsledného CSS kódu se „ladicí okraje“ nevloží.

Vnoření pravidel

Další „syntaktický cukr“ zjednodušuje zápisy dlouhých selektorů, jako jsou např.:

#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
#header .logo:hover {
  text-decoration: none;
}

S LESS je můžeme zapsat takto:

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    :hover { text-decoration: none }
  }
}

Ve výsledném CSS bude taková konstrukce samosebou převedena na tu výše uvedenou. Tato konstrukce by se dala považovat s trochou nadsázky za zavedení principu DRY do CSS.

Výrazy

LESS umí počítat jednoduché matematické výrazy, přičemž rozlišuje jednotky, rozlišuje i barvy a rozměry, takže se vám nepodaří např. sčítat „5px + blue“. Ale můžete zapsat „1px + 5“ (=6px), můžete použít „#888 / 4“ nebo výše uvedené zesvětlení barvy přes „@nice-blue + #111“. Ve výrazech můžete použít čísla, barvy i proměnné.

Komentáře

Kromě komentářů známých z CSS, které jsou zapsané pomocí /* ... */, dovoluje LESS zapsat jednořádkový komentář v syntaxi známé z C-like jazyků, tedy pomocí dvou lomítek  na začátku řádku.

Vkládané soubory

Jako každý správný preprocesor umí i LESS vkládat jiné soubory. Slouží k tomu direktiva @import "..." a její syntaxe je jednoduchá:

@import "definice";
@import "fonty.css";

Pokud má vkládaný soubor doporučenou příponu „.less“, nemusíme ji uvádět.

Pokročilé možnosti

Zatím jsme si uvedli jednoduché vlastnosti LESS, které, s trochou nadsázky řečeno, zvládne i lepší editor se sadou maker. LESS však nabízí i některé vlastnosti, spojované spíš s programovacími jazyky, jako jsou jmenné prostory a oblast viditelnosti.

Lokální proměnné

Proměnné v LESS mají svou „oblast viditelnosti“ podobně jako v programovacích jazycích, kdy proměnná, definovaná v bloku, má přednost před globální. Stejně tak v LESS dostává přednost proměnná, definovaná v mixinu, před tou globální:

@pozadi: red;
#content {
    @pozadi: white;
    p {
         background-color: @pozadi;
      }
}

Jmenné prostory

Pomocí jmenných prostorů můžeme sady pravidel, proměnných či mixinů spojovat do „pojmenovaných balíčků“. Syntaxe je opět poměrně intuitivní:

#UIformular {

  .button {
    font-size: 12px;
    border: 3px solid #eee;
    :hover {font-weight: bold;}
  }
  input { ... }
  label { ... }
}
#menu ul li a {
    color: #335;
    #UIformular > .button;
}

Struktury

LESS obsahuje i náznak struktur – v jmenném prostoru lze definovat proměnné či konstanty a k nim pak přistupovat jako k hodnotám. Dokumentace opět uvádí příklad:

#defaults {
  @width: 960px;
  @color: black;
}
.article { color: #294366; }
.comment {
  width: #defaults[@width];
  color: .article['color'];
}

Jak to použít?

Pokud chcete při kódování použít LESS, můžete zvolit několik způsobů, jak s ním naložit. Můžete psát soubory .less a ty před testem pomocí řádkové utility převést na CSS (např. jako hook při commitu). Můžete je nahrávat přímo na server a tam je on-the-fly konvertovat pomocí skriptu na CSS (a cachovat, samosebou). Nebo můžete použít i řešení na straně klienta, posílat mu přímo styly v less ( <link rel="stylesheet/less" ...>) a pomocí less.js je konvertovat až v prohlížeči u uživatele.

Co s LESS?

Je na každém kodérovi, jak k LESS přistoupí. Někdo může vnímat podobné snahy jako neústrojné nekompatibilní nekodifikované zpotvořenosti, které jdou proti duchu jazyka – v takovém případě na LESS zapomeňte. Pokud na LESS nahlížíte jako na další příležitost, kde řešit cizí chyby, vyhněte se mu taky. Pro jiné ale mohou být funkce tohoto preprocesoru cenné, buď tím, že jim ušetří a zjednoduší práci, nebo třeba i tím, že něco podobného sami řeší či hodlají řešit a hledají vhodný nástroj.

LESS lze použít, jak jsme si řekli, jak v prohlížeči, tak na serveru, ale může ho použít i kodér sám pro sebe, mít .less soubory jen jako své zdroje a před odesláním klientovi je převést na tradiční CSS. Pro klienta se tím nic nezmění, nepřijde o možnost vlastních úprav, není potřeba řešit, že „zákazníkův nový kodér nezná syntaxi LESS“ – a přitom lze využít všech výhod, které LESS nabízí, od snazšího zápisu po jednodušší údržbu kódu. Což je v mnoha případech výhoda, která bohatě vyváží nutnost překladu LESS na CSS i pohoršení jazykových puristů. Ostatně: nikdo nemusí vědět, jak si usnadňujete práci.

Začal programovat v roce 1984 s programovatelnou kalkulačkou. Pokračoval k BASICu, assembleru Z80, Forthu, Pascalu, Céčku, dalším assemblerům, před časem v PHP a teď by rád neprogramoval a radši se věnoval starým počítačům.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 43

Přehled komentářů

mat neni to prasarna!
blizzboz Re: neni to prasarna!
bohyn Re: LESS: stejné CSS za méně peněz
Josef Richter Re: LESS: stejné CSS za méně peněz
blizzboz Re: LESS: stejné CSS za méně peněz
Oldis Re: LESS: stejné CSS za méně peněz
Ivan Nový No v podstatě je prasárna samotné CSS a HTML,
xurfa Re: No v podstatě je prasárna samotné CSS a HTML,
Ivan Nový Re: No v podstatě je prasárna samotné CSS a HTML,
v6ak Re: No v podstatě je prasárna samotné CSS a HTML,
Martin Malý Re: No v podstatě je prasárna samotné CSS a HTML,
Ivan Nový Re: No v podstatě je prasárna samotné CSS a HTML,
mat Re: No v podstatě je prasárna samotné CSS a HTML,
Ivan Nový Re: No v podstatě je prasárna samotné CSS a HTML,
v6ak Hranice LESS: vygenerované CSS neupravovat!
Spud Zajimave reseni
v6ak Javová implementace
Ja Zmatek
On SASS + Compass!
jardam Zkušenost s LESS
Jakub Nešetřil Moje zkušenosti s LESS z praxe
luboskmetko Re: Moje zkušenosti s LESS z praxe
v6ak Re: Moje zkušenosti s LESS z praxe
Jakub Nešetřil Re: Moje zkušenosti s LESS z praxe
Jan Sládek Re: Moje zkušenosti s LESS z praxe
Sebastian PARADA
mat anebo to udelat v PHP
v6ak Re: anebo to udelat v PHP
František Kučera Zajímavé
balki Nieco podobne pre javu ?
v6ak Re: Nieco podobne pre javu ?
balki Re: Nieco podobne pre javu ?
v6ak Re: Nieco podobne pre javu ?
balki Re: Nieco podobne pre javu ?
v6ak Re: Nieco podobne pre javu ?
Jakub Bouček Alternativa pro PHP?
Jakub Bouček Re: Alternativa pro PHP?
Tomas Janovsky prasarna?
Nox Nejen že NENÍ prasárna...
Oldis implementace less v php
kahi Re: implementace less v php
honza dynamicka adresa CSS nefunguje v IE9
kahi Re: dynamicka adresa CSS nefunguje v IE9
Zdroj: https://www.zdrojak.cz/?p=3349