Proměnné uvnitř selektorů v LESS
Proměnné lze použít i uvnitř selektorů.
K tomu je však potřeba použít
trochu jinou syntaxi vložení proměnné:
za @ je třeba vzít název proměnné
do složených závorek. Podívejme se na příkladech.
Předpokládejme, že máme následující proměnnou:
@var: div;
Pojďme vložit tuto proměnnou do selektoru. Zvažme různé situace.
Příklad
Vložme naši proměnnou jako selektor:
@{var} {
font-size: 20px;
}
Výsledek kompilace:
div {
font-size: 20px;
}
Příklad
Nyní předpokládejme, že naše proměnná obsahuje část selektoru:
main @{var} {
font-size: 20px;
}
Výsledek kompilace:
main div {
font-size: 20px;
}
Příklad
Nyní předpokládejme, že říkáme, že v naší proměnné
není obsažen název tagu, ale jeho id.
Přidejme před název proměnné mřížku:
#@{var} {
font-size: 20px;
}
Výsledek kompilace:
#div {
font-size: 20px;
}
Příklad
Nyní předpokládejme, že říkáme, že v naší proměnné není obsažen název tagu, ale jeho třída. Přidejme před název proměnné tečku:
.@{var} {
font-size: 20px;
}
Výsledek kompilace:
.div {
font-size: 20px;
}
Praktické úlohy
Řekněte, jaký bude výsledek kompilace následujícího kódu:
@var: ul;
@{var} {
font-size: 20px;
}
Řekněte, jaký bude výsledek kompilace následujícího kódu:
@var: ul;
div @{var} {
font-size: 20px;
}
Řekněte, jaký bude výsledek kompilace následujícího kódu:
@var: ul;
div @{var} {
font-size: 20px;
}
Řekněte, jaký bude výsledek kompilace následujícího kódu:
@var: ul;
@{var} li {
font-size: 20px;
}
Řekněte, jaký bude výsledek kompilace následujícího kódu:
@var: list;
.@{var} {
font-size: 20px;
}
Řekněte, jaký bude výsledek kompilace následujícího kódu:
@var: list;
#@{var} li {
font-size: 20px;
}
Řekněte, jaký bude výsledek kompilace následujícího kódu:
@var: list;
.@{var} li {
font-size: 20px;
}
Řekněte, jaký bude výsledek kompilace následujícího kódu:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Řekněte, jaký bude výsledek kompilace následujícího kódu:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Řekněte, jaký bude výsledek kompilace následujícího kódu:
@var: .block;
ul@{var} {
font-size: 20px;
}
Řekněte, jaký bude výsledek kompilace následujícího kódu:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Řekněte, jaký bude výsledek kompilace následujícího kódu:
@var: a;
@{var}:hover {
text-decoration: none;
}
Řekněte, jaký bude výsledek kompilace následujícího kódu:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Řekněte, jaký bude výsledek kompilace následujícího kódu:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
