Karel Chuděj19.10.2016Zpět

Less pro pokrokové stylování

Méně je někdy více a toto rčení se rozhodně hodí pro nástroj, který budu popisovat. Už z jeho názvu je patrné, že má za úkol usnadnit programátorovi práci. Less je nástroj určen pro stylování webů a přináší spoustu zajímavých vlastností oproti klasickému CSSku.

Konec opakování stejných názvu tříd pořád dokola a dokola, konec nutnosti si pamatovat všechny hexadecimální kombinace jednotlivých barev a spoustu další výhod.. pojďme na to!

Než přejdeme ke složitějším vlastnostem a funkcím, popíšu alespoň pár základních pro ty, kteří slyší pojem Less poprvé.

Proměnné

Používání proměnných v Lessu je tou základní činností a určitě to doporučuji. Nemusíte si pamatovat rozměr mobilního rozlišení, nebo různé kódy barevných kombinací. Stačí si nad samotnou definicí stylů deklarovat proměnné, do těchto proměnných si tyto hodnoty uložit a poté je kdekoliv v kódu použít.

//VARIABLES 
@myColor: #FFF; 
body {
    background-color: @myColor; 
} 

Nesting a jeho speciality

Jedna z velkých výhod Lessu je vnořování vnitřních elementů jednotlivých tříd. Tak zabezpečíte, aby se vám chování změnilo pouze tam, kde to potřebujete a nikde jinde. Vnořování také zpřehledňuje kód a umožňuje ho rozdělit na jednotlivé úseky a úrovně v nich.

body {
    .content { 
        p { 
            font-size: 14px; 
        } //uzavření stylů pro odstavec ve třídě content 
    } //uzavření stylů pro třídu content 
}

Důležitým znakem při vnořování pro nás bude ampersand (&), který představuje prvek, který potřebujeme nastylovat v zanořené struktuře. Pro představu přikládám příklad.

body {
    .content {
        a {
            &:hover { //představuje a:hover 
                text-decoration: none; 
            } 
        } 
    } 
}

Výsledné CSS pak bude vypadat následovně:

body .content a:hover { text-decoration: none; }

Mějme tento kus html kódu, kde je nadefinován seznam:

<ul>
    <li>Default Item</li>
    <li>Default Item</li>
    <li class="special">Special Item</li>
    <li>Default Item</li>
</ul>    

V Less kódu poté můžeme ke třídě „special“ přistoupit takto:

ul { 
    li { 
        color: #000; 
        &.special { 
            color: #00FF00; 
        }
    } 
}

Mixiny

Mixiny představují předdefinovanou vlastnost, kterou mohu kdekoliv v kódu použít. Může, ale nemusí přebírat parametry, které se v daném mixinu dosadí na pozici proměnné, nebo proměnných. Pod pojmem mixin si můžete představit jednoduchou programovací funkci. Mixin začíná tečkou, za kterou následuje její název a závorky, do kterých je možno vkládat hodnoty, které se dosadí namísto výchozích.

//MIXINS 
.myMixin(@size: 12px, @family: 'Open-Sans', @weight: 400) { 
    font-size: @size; 
    font-family: @family; 
    font-weight: @weight; 
}

body { 
    .content {
        p {
            .myMixin(); // použijí se výchozí hodnoty,
                        // které jsou nadefinovány výše 
            span { 
                .myMixin(14px, Arial, 300); //původní hodnoty budou nahrazeny 
            }
        }
    }
}

Mixin může být i bezparametrický, za příklad se nabízí tzv. clear fix.

Clearfix je zapotřebí použít tam, kde máme “plovoucí” bloky a potřebujeme tyto “plovoucí” bloky ukončit. Viz obrázek:

//MIXINS
.clear-fix() {
    &:after {
        content: '';
        display: block;
        clear: both;
    }
}

body {
    .content {
        .left {
            float: left;
        }
        .right {
            float: right;
        }
        .clear-fix();
    }
}

Loops

Ano, čtete dobře. Také v CSS resp. Lessu lze použít cyklus. Tato vlastnost využívá rekurze a zkušenější z vás jistě rychle poznají princip, ve kterém spočívá provedení smyčky. Na začátku si zvolíme počítadlo, které při každé iteraci snížíme o námi zvolenou hodnotu, dokud tato hodnota bude splňovat podmínku, která určuje ukončení cyklu.

//LOOP
.loop(@i) when (@i > 0) { // proměnná i představuje počet iterací v cyklu
    .padding_right_@{i}0{ 
        padding-right:(@i*10px);
    }
    .loop(@i - 1); //zavoláme mixin rekurzivně a snížíme proměnnou i o jedničku
}
 
.loop(3); // zavoláme mixin kdekoliv v našem kódu

Výstup bude vypadat následovně:

.padding_right_30 { padding-right: 30px; }
.padding_right_20 { padding-right: 20px; }
.padding_right_10 { padding-right: 30px; }

Nevýhody

Ne všechno na Lessu je bezchybné, najdou se i věci, které někdy udělají spíše více škody než užitku v kódu.

Zbytečné zanořování

Zanořování a zejména několika násobné zanořování se může stát cestou na tenký led. Je třeba dát si pozor zda nezanoříme strukturu až příliš, můžete se totiž lehce ztratit a zamotat ve vašem vlastním kódu, zanoření také způsobuje nadřazenost nad prvkem se stejnou třídou, lépe na příkladu:

.content {
    .wrapper {
        a {
            &.button {
                background-color: red;
            }
        }
    }
}

Toto několika násobné zanoření má nevýhodu v tom, že pokud budeme mít jinde v kódu globální třídu .button než ve třídě .content, bude nutná nadbytečná duplikace stylů v kódu. V CSS kódu to bude vypadat následovně:

.content .wrapper a.button {
    background-color: red;
}    

Pro tento konkrétní příklad se nabízí jako řešení nadefinovat si obecný styl pro třídu .button někde nahoře v kódu a poté provádět v zanořeném kódu pouze jednu dvě úpravy výchozích vlastností třídy. Další možnost je deklarace mixinu a poté kdekoliv v kódu tento mixin použít.

.button() {
    display: inline-block;
    position: relative;
    text-align: center;
    padding: 6px 12px;
    text-transform: uppercase;
    text-decoration: none;
    background-color: #333;
    color: #FFF;
    &:hover {
        background-color: #FFF;
        color: #333; 
    }
}

body {
    a.button {
        .button();
    }
}

Import souborů

Další problém může vzniknou pokud v jednom Less souboru provádíme import dalšího Less souboru. Pro představu mějme dva soubory reset.less a main.less. První soubor bude obsahovat výchozí nastavení pro jednotlivé HTML elementy:

reset.less:

div, span, object, iframe, img, table, caption, thead, tbody, tfoot, tr, tr, td, article, aside, canvas, details, figure, hgroup, menu, nav, footer, header, section, summary, mark, audio, video { 
    border: 0; 
    margin: 0; 
    padding: 0; 
} 

h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cit, code, del, dfn, em, ins, q, samp, small, strong, sub, sup, b, i, hr, dl, dt, dd, ol, ul, li, fieldset, legend, label { 
    border: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    margin: 0; 
    padding: 0; 
}

main.less - v tomto souboru budeme mít kromě našich stylů také import souboru definovaného výše:

//IMPORT
@import "reset.less"

Problém nastane kdy změníme nějakou vlastnost v souboru reset.less, ale k projektu máme nalinkovaný pouze soubor main.less, tak se musí přegenerovat (pomocí JavaScriptu less.js nebo lessc v PHP) “ručně” i soubor main.less, jinak se změny neprojeví.

Jak Less použít

Pokud jste se dostali až do této části, tak si troufnu tvrdit, že vás můj článek zaujal a tak by bylo vhodné abych vysvětlil jak si Less rozchodit na vlastním stroji.

Nejjednodušší postup je prostřednictvím JavaScriptu. Tento script se za vás postará o převod stylů na obyčejné CSS.

Nejprve je potřeba si stáhnout less.js. Dále si vytvořte soubor s příponou .less do kterého budete psát styly v jazyku Less, které jste se díky tomuto článku naučili. V poslední řadě je třeba oba soubory nalinkovat k vašemu projektu:

<head>
    <link rel="stylesheet/less" type="text/css" href="styles.less" />
    <script type="text/javascript" src="less.js"></script>
</head>

Kompilování v PHP

Další možností jak použít Less je přes PHP kompilátor. Jde o projekt Lessphp, který připojíte k vašemu PHP projektu. Budete mít k dispozici několik metod, pomocí kterých můžete zkompilovat váš Less soubor na klasický CSS.

require "lessc.inc.php";
$less = new lessc;
$css = $less->compileFile("styles.less");   // uloží výsledné CSS do řetězce
file_put_contents("styles.css", $css);      // uložíme do souboru 

Oproti JavaScriptu má PHP kompilátor výhodu v rychlosti aplikaci stylů. JavaScriptové řešení má určité zpoždění. Výhodou je také možnost vypnout si kompilování na produkci a použít již vygenerované styly.

Teď už vám nic nebrání k tomu aby jste začali používat Less namísto klasického CSS.

Alternativy

Mezi alternativy Lessu můžeme zařadit jazyky jako Sass, SCSS a Stylus.

SCSS je hodně podobný Lessu - mezi drobné rozdíly patří např. deklarace proměnných a definování mixin:

//VARIABLES
$bgColor: #333;
$borderColor: #FF0000;

body {
    background-color: $bgColor;
}

//MIXINS
@mixin specialBg() {
    background-color: $bgColor;
    border: 10px solid $borderColor;
}

body {
    .content {
        @include specialBg();
    }
}    

V Sassu a Stylusu můžete zapomenout na složené závorky a středníky a ve Stylusu dokonce i na dvojtečky. V obou je pak třeba dodržovat přesné odsazení, každá úroveň je odsazena od úrovně nadřazené.

Sass:

//VARIABLES
$bgColor: #333
$borderColor: #FF0000

body
    background-color: $bgColor

změny jsou i co se týče mixin:

//MIXINS
=specialBg()
    background-color: $bgColor
    border: 10px solid $borderColor

body 
    .content 
        +specialBg()

Stylus:

//VARIABLES
bgColor = #333
borderColor = #FF0000;

//MIXINS
specialBg()
    background-color bgColor
    border 1px solid borderColor

body
    background-color bgColor
    .content
        specialBg()

Závěr

Less má určitě více výhod než nevýhod a oproti klasickému CSS nabízí spoustu zajímavých vlastností, které vám dost ulehčí práci na vašich projektech.

Karel Chuděj
chudej@kurzor.net
Front-end developer