Mapy

Skupinu vlastností nebo mixinů můžeme použít jako mapy hodnot. Můžeme si sloučit vlastnosti, které spolu souvisí a udělat tak náš kód čitelnější. Následující ukázka ukazuje jak mapy hodnot vytvořit a jak je použít. Pro použití jen přidáme za proměnnou uchovávají mapu hodnot hranaté závorky s hodnotou, kterou chceme získat.

// LESS

@velikosti: {
    mobile: 320px;
    tablet: 768px;
    desktop: 1024px;
}

.navbar {
    display: block;

    @media (min-width: @velikosti[tablet]) {
        display: inline-block;
    }
}

/* zkompilované CSS */

.navbar {
    display: block;
}

@media (min-width: 768px) {
    .navbar {
        display: inline-block;
    }
}

Mapy můžeme použít i u mixinů jak ukazuje následující ukázka. Můžeme si tak vzít jen jednu hodnotu z mixinu, kterou potřebujeme.

// LESS

#library () {
    .colors() {
        primary: green;
        secondary: blue;
    }
}

#library () {
    .colors() { primary: grey; }
}

button {
    color: #library.colors[primary]
    border-color: #library.colors[secondary];
}

/* zkompilované CSS */

button {
color: grey;
border-color: blue;
}

Pokud jsme si pomocí hranatých závorek našli nějakou hodnotu, která uchovává další skupiny hodnot, tak můžeme pomocí dalších hranatých závorek získat z této skupiny hodnot nějakou hodnotu. Následující ukázka kódu toto použití ukazuje.

// LESS

@config: {
    @options: {
        library-on: true;
    }
}

& when (@config[@options][library-on] = true) {
    button {
        color: green;
    }
}

/* zkompilované CSS */

button {
color: green;
}

Použití hodnoty proměnné pro nalezení hodnoty

Když bychom potřebovali najít hodnotu podle hodnoty nějaké proměnné, tak musíme při jejím použití přidat před název proměnné 2x "@" namísto jednoho. Pokud bychom napsali jen jeden "@", tak bychom řekli že chceme najít proměnou která se jmenuje jako předaná proměnná.

// LESS

.barvy() {
@zelena: green;
}

@hodnota-k-vyhledani: zelena;

header {
background-color: .barvy[@@hodnota-k-vyhledani];
}

/* zkompilované CSS */

header {
background-color: green;
}

pokračovat na další část