LESS: CSS preprocesor pro pohodlnější stylování
Pokud už děláte webové stránky nebo s nimi třeba teprve začínáte,
asi jste se seznámili se stylovacím jazykem CSS. CSS nám umožňuje říct
prohlížeči, jak má stránku či aplikaci zobrazit. Jeho zápis je přitom
velmi jednoduchý a celkem rychle se učí. Problém nastává, když se nám
CSS styly nebývale rozrostou a začneme se v nich ztrácet. CSS totiž
nenabízí žádnou možnost, jak styly uvnitř souboru strukturovat. Vždy
musí být uveden jeden či více CSS selektorů, po kterém musí následovat
blok s výčtem všech vlastností, které jim chceme nastavit. Mohou pak
vznikat celkem dlouhé řetězce selektorů, jako například
table.table.table-border.table-hover thead tr th.column-name span.visible
.
CSS dál nenabízí nic jako proměnné, kam bychom si mohli ukládat třeba
použité barvy nebo celé styly, které se opakují u několika různých
elementů. Dalším problémem je CSS3. To nabízí obrovskou škálu nových
stylů, ale abychom je mohli bezpečně použít, musíme většinou uvést i
prefixované vlastnosti pro starší verze prohlížečů. Typickým příkladem
jsou zakulacené rohy bloku. Chtěli bychom zaoblit rohy bloku s poloměrem 5
pixelů.
-webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;
To už je hodně nepohodlné, zvlášť pokud bychom pak měli měnit poloměr. Jde to udělat líp použitím nějakého CSS preprocesoru, který nám nabídne mnohem víc funkcí než CSS. Ve výsledku se ale přeloží opět do CSS. Takovým preprocesorem je například LESS.
Vnořené bloky stylů
V LESS můžeme bloky stylů vkládat do sebe raději než psát dlouhé selektory. Například takovýto zápis v LESS (z oficiální dokumentace LESS):
// LESS #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } }
Se po kompilaci převede na:
/* CSS */ #header h1 { font-size: 26px; font-weight: bold; } #header p { font-size: 12px; } #header p a { text-decoration: none; } #header p a:hover { border-width: 1px; }
Takový zápis je celkem snadný a rozhodně lépe čitelný. Není třeba ho
moc vysvětlovat. Za povšimnutí ale stojí znak &
, který zde
reprezentuje rodičovský prvek (v našem případě odkaz). Nemusíme tedy
psát a:hover { ... }
pod blok odkazu, ale přímo v bloku odkazu
můžeme napsat &:hover { ... }
. LESS nám také dovoluje na
rozdíl od CSS, psát jednořádkové komentáře:
// komentář
.
Proměnné a operace s nimi
Další možnost, kterou nám LESS nabízí, je vytváření proměnných. Můžeme do nich ukládat barvy, velikosti a další věci. Navíc s nimi můžeme provádět základní operace, jako je násobení, dělení, sčítání, odčítání. A to dokonce i s barvami.
LESS
@success: #537a0b; @error: #ae2917; @info: #255d86; @size: 1px; .alert { color: @info; border: @size solid; &.success { color: @success; } &.error { color: @error; border-size: @size*2; } }
Funkce
LESS nám umožňuje psát si vlastní funkce a sám nabízí několik dost užitečných funkcí. Vlastní funkce může mít parametry, kterým můžeme také nastavit výchozí hodnoty.
// LESS funkce .border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; } // Použití .box { background: #f0f0f0; border: 1px solid #ddd; .border-radius(5px); } // Výsledek .box { background: #f0f0f0; border: 1px solid #ddd; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }
Funkce mohou mít i volitelné parametry.
// Místo toho, abychom použili @x @y @blur @color, jednoduše vypíšeme všechny argumenty použitím @arguments // To můžeme udělat uvnitř jakékoli naší funce .box-shadow(@x: 0, @y: 0, @blur: 5px, @color: #000) { -webkit-box-shadow: @argumnets; -moz-box-shadow: @argumnets; box-shadow: @argumnets; } // Ta samá funkce, pokud ji zavoláme bez argumentů // Odstraní box-shadow .box-shadow () { box-shadow: none !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; } // Funkce s jedním nebo více parametry .funkce(@size, ...) { // Navsatví nějaké vlastnosti // Můžeme použít @arguments pro získání všech argumentů funkce } .funkce(@size, @rest...) { // Opět nastavíme nějaké vlastnosti // Můžeme použít @rest pro získání všech argumentů, kromě @size // Můžeme použít @arguments pro získání všech argumentů funkce }
Vestavěné funkce
LESS obsahuje hodně vestavěných funkcí, které nám mnohdy velmi ulehčí práci se styly. Pro jejich podrobnou dokumentaci se můžete podívat na oficiální stránky http://lesscss.org/#…
Z oficiálních stránek:
escape(@string); // zákóduje řetězec pro URL e(@string); // escapuje textový řetězec %(@string, values...); // zformátuje řetězec (např. %("Vysledek: %d", 5)) unit(@dimension, [@unit: ""]); // odstraní nebo změní jednotku rozměru color(@string); // parsuje řetězec na barvu ceil(@number); // zaokrouhlí číslo nahoru floor(@number); // zaokrouhlí číslo dolů percentage(@number); // převede číslo na procenta (0.8 -> 80%) round(number, [places: 0]); // zaokrouhlí číslo rgb(@r, @g, @b); // převede na barvu v hexadecimálním tvaru rgba(@r, @g, @b, @a); // převede na barvu argb(@color); // převede na barvu v hexadecimálním tvaru - #AARRGGBB hsl(@hue, @saturation, @lightness); // převede na RGB v hexadecimálním tvaru hsla(@hue, @saturation, @lightness, @alpha); // vytvoří barvu z modelu HSLA hsv(@hue, @saturation, @value); // převede na RGB v hexadecimálném tvaru hsva(@hue, @saturation, @value, @alpha); // vytvoří bravu z modelu HSVA hue(@color); // vrátí odstín barvy saturation(@color); // vrátí nasycení barvy lightness(@color); // vrátí světlost barvy red(@color); // vrátí červenou složku green(@color); // vrátí zelenou složku blue(@color); // vrátí modrou složku alpha(@color); // vrátí alpha kanál barvy (průhlednost) luma(@color); // vrátí černobílou složku saturate(@color, 10%); // zvýší nasycení barvy o 10% desaturate(@color, 10%); // sníží nasycení barvy o 10% lighten(@color, 10%); // zesvětlí barvu o 10% darken(@color, 10%); // ztmaví barvu o 10% fadein(@color, 10%); // sníží průhlednost barvy o 10% fadeout(@color, 10%); // svýší průhlednost barvy o 10% fade(@color, 50%); // nastaví průhlednost barvy na 50% spin(@color, 10); // Posune odstín o 10 stupňů doprava mix(@color1, @color2, [@weight: 50%]); // vrátí mix dvou barev greyscale(@color); // vrátí šedou barvu contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // vrátí @darkcolor pokud v @color1 bude > 43% černobílé složky // jinak vrátí @lightcolor multiply(@color1, @color2); screen(@color1, @color2); overlay(@color1, @color2); softlight(@color1, @color2); hardlight(@color1, @color2); difference(@color1, @color2); exclusion(@color1, @color2); average(@color1, @color2); negation(@color1, @color2);
Kompilace LESS
Abychom mohli použít LESS, musíme ho zkompilovat do CSS. Standardně nám nabízí možnost, překládat styly JavaScriptem (na straně serveru nebo klienta). Na straně klienta stačí jen importovat potřebný skript. Na serveru si musíte nainstalovat LESS compiler přes Node package manager
$ npm install -g less
Kompilovat pak můžete v konzoli pomoci příkazu
lessc styles.less
. Případně můžete použít jiný výstup
příkazu lessc styles.less > styles.css
PHP kompilátor
Kompilovat styly přes příkazovou řádku není moc pohodlné. Mnohem lepší je použít PHP skript a v nejlepším případě si kompilaci ještě zautomatizovat. Takový kompilátor je např. http://leafo.net/lessphp/