List funkce

length

Tato funkce vrací počet položek v listu hodnot.

Parametry

list - čárkami nebo mezerami oddělený list hodnot

@list: "banana", "tomato", "potato", "peach";

@pocet-polozek: length(@list);

extract

Tato funkce vrací jednu hodnotu z listu hodnot podle předaného indexu.

Parametry

list - čárkami nebo mezerami oddělený list hodnot
index - pozice položky (indexuje se od 1)

// LESS

@list-barev = red, green, blue, yellow;

@barva = extract(@list-barev, 2);

div {
color: @barva;
}

/* zkompilované CSS */

div {
color: green;
}

range

Tato funkce slouží k vygenerování listu hodnot.

Parametry

startovní hodnota (např. 3 nebo 3px) - tento parametr je volitelný
konečná hodnota (např. 5 nebo 5px)
krok (číslo o které se budou zvyšovat čísla v listu hodnot) - tento parametr je volitelný

// vygeneruje: 1, 2, 3, 4
@prvni-list: range(4);

// vygeneruje: 10px, 20px, 30px
@druhy-list: range(10px, 30px, 10);

each

Tato funkce provede pro každou položku v listu hodnot nějakou část kódu, kterou si určíme. V tomto kódu máme k dispozici tři proměnné, které můžeme použít: @value - hodnota, @key - klíč, @index - pozice hodnoty v listu.

Parametry

list - čárkami nebo mezerami oddělený list hodnot
kód uzavřený ve složených závorkách

// LESS

@selektory: blue, green, red;

// tato funkce vytvoří podle listu @selektory tři selektory
each(@selektory, {
    // pro každou hodnotu v listu se provede tento kód
    // hodnota bude k dispozici přes proměnnou @value
    .sel-@{value} {
        padding: 5px;
    }
});

/* zkompilované CSS */

.sel-blue {
    padding: 5px;
}

.sel-green {
    padding: 5px;
}

.sel-red {
    padding: 5px;
}

Předchozí ukázka ukazuje funkci each na listu s hodnotami. Proměnné ale mohou uchovávat také klíče s hodnotami, následující ukázka ukazuje, jak bychom je mohli použít pro funkci each. Je to jen tak pro ukázku, jinak by v tomto případě bylo samozřejmě lepší použít mixin.

// LESS

@vlastnosti: {
    color: lightgreen;
    padding: 5px;
    background-color: yellow;
}

div {
    each(@vlastnosti, {
        @{key}: @value;
    });
}

/* zkompilované CSS */

div {
    color: lightgreen;
    padding: 5px;
    background-color: yellow;
}

Jako druhý parametr můžeme funkci each předat namísto kódu ve složených závorkách anonymní mixin. Následující ukázka ukazuje jak takový anonymní mixin vypadá a jak ho použít ve funkci each. Zároveň ukázka ukazuje, že nemusíme funkci each používat jen na proměnné, ale také na mixiny.

// LESS

.mixin() {
    color: lightgreen;
    padding: 5px;
    background-color: yellow;
}

div {
    // v této ukázce používáme namísto proměnné mixin
    // a také používáme anonymní mixin
    each(.mixin, .(@value, @key, @index) {
        @{key}: @value;
    });
}

/* zkompilované CSS */

div {
    color: lightgreen;
    padding: 5px;
    background-color: yellow;
}

For cyklus pomocí funkce each a range

Pokud zkombinujeme funkci each a range, tak můžeme vytvořit for cyklus. Následující ukázka kódu ukazuje jak na to.

// LESS

// následující kód předaný funkci each se bude opakovat čtyřikrát
each(range(4), {
    // proměnná @value bude každým průchodem cyklu větší o 1
    // protože funkce range vygenerovala tento list: 1, 2, 3, 4
    .col-@{value} {
        height: (@value * 50px);
    }
});

/* zkompilované CSS */

.col-1 {
    height: 50px;
}

.col-2 {
    height: 100px;
}

.col-3 {
    height: 150px;
}

.col-4 {
    height: 200px;
}