Less: CSS preprocesor pre pohodlnejšie štýlovanie
Pokiaľ už robíte webové stránky alebo s nimi treba ešte len začínate,
asi ste sa zoznámili so stylovacím jazykom CSS. CSS nám umožňuje povedať
prehliadači, ako má stránku či aplikácii zobraziť. Jeho zápis je pritom
veľmi jednoduchý a celkom rýchlo sa učí. Problém nastáva, keď sa nám
CSS štýly nebývalo rozrastú a začneme sa v nich strácať. CSS totiž
neponúka žiadnu možnosť, ako štýly vnútri súboru štruktúrovať. Vždy
musí byť uvedený jeden alebo viac CSS selektorov, po ktorom musí nasledovať
blok so zoznamom všetkých vlastností, ktoré im chceme nastaviť. Môžu
potom vznikať celkom dlhé reťazce selektorov, ako napríklad
table.table.table-border.table-hover thead tr th.column-name span.visible.
CSS ďalej neponúka nič ako premenné, kam by sme si mohli ukladať napríklad
použité farby alebo celé štýly, ktoré sa opakujú u niekoľkých rôznych
elementov. Ďalším problémom je CSS3. To ponúka obrovskú škálu nových
štýlov, ale aby sme ich mohli bezpečne použiť, musíme väčšinou uviesť
aj prefixované vlastnosti pre staršie verzie prehliadačov. Typickým
príkladom sú zaoblené rohy bloku. Chceli by sme zaobliť rohy bloku s
polomerom 5 pixelov.
-webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;
To už je veľa nepohodlné, zvlášť ak by sme potom mali meniť polomer. Ide to urobiť líp použitím nejakého CSS preprocesoru, ktorý nám ponúkne oveľa viac funkcií ako CSS. Vo výsledku sa ale preloží opäť do CSS. Takým preprocesoru je napríklad LESS.
Vnorené bloky štýlov
V LESS môžeme bloky štýlov vkladať do seba radšej než písať dlhé selektory. Napríklad takýto zápis v LESS (z oficiálnej dokumentácie LESS):
// LESS #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } }
Sa po kompiláciu prevedie 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; }
Takýto zápis je celkom jednoduchý a rozhodne lepšie čitateľný. Netreba
ho veľmi vysvetľovať. Za povšimnutie ale stojí znak &,
ktorý tu reprezentuje rodičovský prvok (v našom prípade odkaz). Nemusíme
teda písať a:hover { ... } pod blok odkazu, ale priamo v bloku
odkaze môžeme napísať &:hover { ... }. LESS nám tiež
dovoľuje na rozdiel od CSS, písať jednoriadkové komentáre:
// komentář.
Premenné a operácie s nimi
Ďalšia možnosť, ktorú nám LESS ponúka, je vytváranie premenných. Môžeme do nich ukladať farby, veľkosti a ďalšie veci. Navyše s nimi môžeme vykonávať základné operácie, ako je násobenie, delenie, sčítanie, odčítanie. A to dokonca aj s farbami.
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; } }
Funkcie
LESS nám umožňuje písať si vlastné funkcie a sám ponúka niekoľko dosť užitočných funkcií. Vlastné funkcie môže mať parametre, ktorým môžeme tiež nastaviť predvolené 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; }
Funkcie môžu mať aj voliteľné parametre.
// 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 }
Vstavané funkcie
LESS obsahuje veľa vstavaných funkcií, ktoré nám mnohokrát veľmi uľahčí prácu so štýlmi. Pre ich podrobnú dokumentáciu sa môžete pozrieť na oficiálnej stránky http://lesscss.org/...
Z oficiálnych stránok:
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);
Kompilácie LESS
Aby sme mohli použiť LESS, musíme ho skompilovať do CSS. Štandardne nám ponúka možnosť, prekladať štýly JavaScriptom (na strane servera alebo klienta). Na strane klienta stačí len importovať potrebný skript. Na serveri si musíte nainštalovať LESS compiler cez Node package manager
$ npm install -g less
Kompilovať potom môžete v konzole pomôcť príkaze
lessc styles.less. Prípadne môžete použiť iný výstup
príkazu lessc styles.less > styles.css
Php kompilátor
Kompilovať štýly cez príkazový riadok nie je moc pohodlné. Oveľa lepšie je použiť PHP skript a v najlepšom prípade si kompiláciu ešte zautomatizovať. Taký kompilátor je napr. Http://leafo.net/lessphp/
