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

HTML a CSS Profesionální webdesign 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/


 

  Aktivity (1)

Článek pro vás napsal Drahomír Hanák
Avatar
Autor v současné době studuje Informatiku. Zajímá se o programování, matematiku a grafiku.

Jak se ti líbí článek?
Celkem (18 hlasů) :
4.666664.666664.666664.666664.66666


 


Miniatura
Předchozí článek
Úvod do gridu960
Miniatura
Všechny články v sekci
Profesionální webdesign v CSS 3
Miniatura
Následující článek
Návrh webu v programu GIMP

 

 

Komentáře
Zobrazit starší komentáře (13)

Avatar
Kit
Redaktor
Avatar
Kit:

Když potřebuji, aby mi editor našeptával, tak si do něj potřebnou vlastnost dopíšu. Většinou to však není potřebné. Stačí znát jazyk, ve kterém píšeš.

Odpovědět 24.4.2013 11:31
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Odpovídá na Kit
Michal Žůrek (misaz):

jo jenomže my nemáme náladu ani čas si přepisovat IDE.

Odpovědět 20.7.2013 11:00
Nesnáším {}, proto se jim vyhýbám.
Avatar
Kit
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Kit:

Jasně, proto si poctivě datlujete skoro každé písmenko a pak si stěžujete, jak je ten programovací jazyk ukecaný.

Odpovědět 20.7.2013 11:08
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Michal Žůrek (misaz):

Je to zajimavé, možná se toho dočkáme u css4 v základu, kdo ví.

Odpovědět 20.7.2013 11:09
Nesnáším {}, proto se jim vyhýbám.
Avatar
Kit
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Kit:

Třeba se někdy dočkáme nějakého XCSS postaveného na XML.

Odpovědět 20.7.2013 11:38
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Odpovídá na Kit
Michal Žůrek (misaz):

tedy vlastně XAMLu pro web.

Odpovědět 20.7.2013 11:52
Nesnáším {}, proto se jim vyhýbám.
Avatar
Kit
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Kit:

XAML popisuje strukturu. Na to už máme HTML. To spíš se do XAML přidá CSS.

Odpovědět 20.7.2013 12:05
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Matúš Petrofčík
Šéfredaktor
Avatar
Matúš Petrofčík:

toto by bolo dobré pridať do článku ako ukážku k tomu javascriptu :)

inak pekný článok ;)

Odpovědět  +1 29.12.2013 4:22
obsah kocky = r^2 ... a preto vlak drnká
Avatar
Lukaaash
Redaktor
Avatar
Lukaaash:

Tak tohle je parádní, asi tuhle utilitku využiji :)
Dík za článek :)

Odpovědět  +1 19.1.2014 20:52
Trocha poezie do toho umírání
Avatar
platkevic
Člen
Avatar
platkevic:

Jen drobnost, u tech .box-shadow máš napsáno @argumnets místo arguments.

 
Odpovědět 8.1.2015 13:48
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

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