Proměnné s vlastnostmi

Proměnné mohou uchovávat také skupiny vlastností, vnořených selektorů, media deklarací a mnoho dalšího. Následující ukázka sice ukazuje stejné použití jako u mixinů, ale narozdíl od nich můžeme proměnné předávat do jiných mixinů atp.

// LESS

@nejake-vlastnosti: {
    color: green;
    background: yellow;
}

#header {
    @nejake-vlastnosti();
}

/* zkompilované CSS */

#header {
color: green;
background: yellow;
}

Proměnné s vlastnostmi se nám mohou hodit když máme např. mixin, který obaluje nějaký kód třeba do media queries ale tento kód chceme mixinu předávat jako parametr.

// LESS

.desktop(@rules) {
    @media screen and (min-width: 1200px) {
        @rules();
    }
}

header {
    background-color: #ffeed5;

    .desktop({
        color: yellow;
        background-color: red;
    });
}

/* zkompilované CSS */

header {
    background-color: #ffeed5;
}

@media screen and (min-width: 1200px) {
    header {
        color: yellow;
        background-color: red;
    }
}

Proměnná může kromě vlastností uchovávat třeba také mixiny. Když potom proměnnou použijeme v těle nějakého selektoru, tak se nám mixiny zpřístupní a můžeme je použít.

// LESS

@promenna: {
    .mixin() {
        color: blue;
    }
}

button {
    // použití proměnné nám zpřístupní mixin, který uchovává
    @promenna();
    // použitím proměnné se nám zpřístupnil mixin a můžeme jej zavolat
    .mixin();
}

/* zkompilované CSS */

button {
color: blue;
}

Získání vlastnosti ze skupiny vlastností uvnitř proměnné

Někdy můžeme chtít získat jednu vlastnost ze skupiny vlastností, které proměnná obsahuje. To můžeme provést pomocí hranatých závorek jak ukazuje následující ukázka.

// LESS

@promenna: {
    cervena: red;
    zelena: green;
    modra: blue;
}

.box {
    // použití jedné hodnoty z proměnné @promenna
    color: @promenna[zelena];
}

/* zkompilované CSS */

.box {
color: green;
}

pokračovat na další část