Premenné vo vnútri selektorov v LESS
Premenné je možné použiť aj vo vnútri selektorov.
Na to je však potrebné použiť
trochu inú syntax vloženia premennej:
za @ názov premennej je potrebné vziať
do zložených zátvoriek. Pozrime sa na príkladoch.
Predpokladajme, že máme nasledujúcu premennú:
@var: div;
Vložme túto premennú do selektora. Zvážme rôzne situácie.
Príklad
Vložme našu premennú ako selektor:
@{var} {
font-size: 20px;
}
Výsledok kompilácie:
div {
font-size: 20px;
}
Príklad
Predpokladajme teraz, že naša premenná obsahuje časť selektora:
main @{var} {
font-size: 20px;
}
Výsledok kompilácie:
main div {
font-size: 20px;
}
Príklad
Predpokladajme teraz, že hovoríme, že v našej premennej
nie je názov tagu, ale jeho id.
Pridajme pred názov premennej mriežku:
#@{var} {
font-size: 20px;
}
Výsledok kompilácie:
#div {
font-size: 20px;
}
Príklad
Predpokladajme teraz, že hovoríme, že v našej premennej nie je názov tagu, ale jeho trieda. Pridajme pred názov premennej bodku:
.@{var} {
font-size: 20px;
}
Výsledok kompilácie:
.div {
font-size: 20px;
}
Praktické úlohy
Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:
@var: ul;
@{var} {
font-size: 20px;
}
Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:
@var: ul;
div @{var} {
font-size: 20px;
}
Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:
@var: ul;
div @{var} {
font-size: 20px;
}
Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:
@var: ul;
@{var} li {
font-size: 20px;
}
Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:
@var: list;
.@{var} {
font-size: 20px;
}
Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:
@var: list;
#@{var} li {
font-size: 20px;
}
Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:
@var: list;
.@{var} li {
font-size: 20px;
}
Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:
@var: .block;
ul@{var} {
font-size: 20px;
}
Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:
@var: a;
@{var}:hover {
text-decoration: none;
}
Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Povedzte, aký bude výsledok kompilácie nasledujúceho kódu:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
