Proměnné

Když píšeme CSS styly, tak se nám často stává, že používáme stejnou hodnotu na více místech najednou. Pokud bychom tuto hodnotu chtěli později změnit a měli ji v kódu např. stokrát, tak bychom museli procházet celý kód a ručně měnit každý výskyt této hodnoty. To nám samozřejmě zabere nějaký čas a mohli bychom na některém místě hodnotu zapomenout přepsat. Proto nám LESS umožňuje vytvořit si proměnné do kterých si uložíme nějaké hodnoty a tyto proměnné potom v kódu použijeme namísto hodnoty samotné.

Následující ukázka kódu ukazuje, jak se proměnné vytvářejí a jak se používají.

// LESS

// deklarace proměnných
@link-color: #428bca;
@link-color-hover: #2f4692;

// použití proměnných
a {
color: @link-color;
}
a:hover {
color: @link-color-hover;
}

/* zkompilované CSS */

/* při kompilaci se každý výskyt proměnné převede
na hodnotu, kterou proměnná obsahuje */
a {
color: #428bca;
}
a:hover {
color: #2f4692;
}

Možnosti použití proměnných

Proměnné nemusíme používat jen pro nastavování hodnot vlastností, jak je to ukázáno v předchozí ukázce kódu. Můžeme je použít i na jiných místech, například u jmen selektorů, názvů vlastností atp.

Selektory

Proměnné můžeme používat také v názvech selektorů. Při použití ale název proměnné musíme napsat mezi znaky "@{" a "}".

// LESS

// vytvoření proměnné, kterou použijeme v názvu selektoru
@hlavni-nadpis: main-heading;

// použití proměnné
.@{hlavni-nadpis} {
font-size: 25px;
}

/* zkompilované CSS */

.main-heading {
font-size: 25px;
}

URL

Pokud v kódu používáme URL adresy, tak si pro ně můžeme také vytvořit proměnné. Nemusíme ukládat v proměnné celou URL adresu, ale třeba jen její část.

// LESS

// vytvoření proměnné, kterou použijeme na začátku URL adresy
@obrazky: "../img";

// použití proměnné v URL adrese
body {
background: url("@{obrazky}/pozadi.png");
}

/* zkompilované CSS */

body {
background: url("../img/pozadi.png");
}

Importování

Další použití proměnných může být při importování.

// LESS

// vytvoření proměnné
@themes: "../src/themes";

// použití proměnné
@import "@{themes}/tidal-wave.less";

Vlastnosti

Proměnné můžeme využít také při psaní vlastností.

// LESS

// vytvoření proměnné
@property: color;

// použití proměnné
p {
@{property}: #0ee0ee;
background-@{property}: #999999;
}

/* zkompilované CSS */

p {
color: #0ee0ee;
background-color: #999999;
}

Vytvoření proměnné podle proměnné

Pokud chceme, tak si můžeme vytvořit proměnnou podle proměnné, která již existuje. Potom ale při používání této vytvořené proměnné musíme použít 2x @.

// LESS

@color-primary: #2aa22a;
@color-secondary: #2a64a2;

p {
    // vytvoření proměnné podle proměnné
    @color: color-primary;

    // použití proměnné, která byla vytvořena podle jiné proměnné
    color: @@color;
}

/* zkompilované CSS */

p {
color: #2aa22a;
}

Kdy můžeme proměnné použít a měnění jejich hodnoty

Proměnné nemusí být deklarované abychom je mohli použít.

// LESS

.box {
    // použití proměnných před jejich vytvořením
    width: @width;
    height: @height;
}
// zde vytváříme proměnné až po jejich použití
@width: 60px;
@height: 40px;

/* zkompilované CSS */

.box {
width: 60px;
height: 40px;
}

Pokud v kódu definujeme proměnnou dvakrát nebo vícekrát, tak se použije hodnota v poslední deklaraci. Toto chování ukazuje následující ukázka.

// LESS

@barva: red;

.text-section {
    // zde se nastaví červená barva
    color: @barva;

    h1 {
        // změníme hodnotu proměnné barva
        @barva: green;

        // zde se nastaví zelená barva
        color: @barva;
    }

/* zkompilované CSS */

.text-section {
color: red;
}
.text-section h1 {
color: green;
}

Vlastnosti jako proměnné

Namísto proměnných se nám občas může hodit použít jako proměnnou nějakou vlastnost. Jak to provést ukazuje následující ukázka, v podstatě jen namísto @ napíšeme $. Hodnota bude stejně jako u proměnných poslední výskyt vlastnosti.

// LESS

p {
    // nastavení barvy textu
    color: #2aa22a;

    // barva pozadí bude stejná jako barva textu
    background-color: $color;
}

/* zkompilované CSS */

p {
color: #2aa22a;
background-color: #2aa22a;
}

pokračovat na další část