LESS: CSS preprocesor pro pohodlnější stylování

Vydávání, hosting a aktualizace umožňují jeho sponzoři.
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/
Komentáře


Zobrazeno 10 zpráv z 25. Zobrazit vše