Variabile în interiorul selectorilor în LESS
Variabilele pot fi folosite și în interiorul selectorilor.
Pentru aceasta, totuși, trebuie să folosiți
o sintaxă ușor diferită pentru inserarea variabilei:
după @ numele variabilei trebuie să fie pus
între acolade. Să vedem câteva exemple.
Să presupunem că avem următoarea variabilă:
@var: div;
Să efectuăm inserarea acestei variabile în selector. Să analizăm diverse situații.
Exemplul
Să efectuăm inserarea variabilei noastre ca selector:
@{var} {
font-size: 20px;
}
Rezultatul compilării:
div {
font-size: 20px;
}
Exemplul
Să presupunem acum că variabila noastră conține o parte a selectorului:
main @{var} {
font-size: 20px;
}
Rezultatul compilării:
main div {
font-size: 20px;
}
Exemplul
Să presupunem acum că spunem că în variabila noastră
nu se află numele tag-ului, ci id-ul său.
Să adăugăm în fața numelui variabilei diez:
#@{var} {
font-size: 20px;
}
Rezultatul compilării:
#div {
font-size: 20px;
}
Exemplul
Să presupunem acum că spunem că în variabila noastră nu se află numele tag-ului, ci clasa sa. Să adăugăm în fața numelui variabilei un punct:
.@{var} {
font-size: 20px;
}
Rezultatul compilării:
.div {
font-size: 20px;
}
Sarcini practice
Spuneți care va fi rezultatul compilării următorului cod:
@var: ul;
@{var} {
font-size: 20px;
}
Spuneți care va fi rezultatul compilării următorului cod:
@var: ul;
div @{var} {
font-size: 20px;
}
Spuneți care va fi rezultatul compilării următorului cod:
@var: ul;
div @{var} {
font-size: 20px;
}
Spuneți care va fi rezultatul compilării următorului cod:
@var: ul;
@{var} li {
font-size: 20px;
}
Spuneți care va fi rezultatul compilării următorului cod:
@var: list;
.@{var} {
font-size: 20px;
}
Spuneți care va fi rezultatul compilării următorului cod:
@var: list;
#@{var} li {
font-size: 20px;
}
Spuneți care va fi rezultatul compilării următorului cod:
@var: list;
.@{var} li {
font-size: 20px;
}
Spuneți care va fi rezultatul compilării următorului cod:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Spuneți care va fi rezultatul compilării următorului cod:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Spuneți care va fi rezultatul compilării următorului cod:
@var: .block;
ul@{var} {
font-size: 20px;
}
Spuneți care va fi rezultatul compilării următorului cod:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Spuneți care va fi rezultatul compilării următorului cod:
@var: a;
@{var}:hover {
text-decoration: none;
}
Spuneți care va fi rezultatul compilării următorului cod:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Spuneți care va fi rezultatul compilării următorului cod:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
