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/