Mainīgie LESS selektoros
Mainīgos var izmantot arī selektoru iekšienē.
Tomēr, lai to izdarītu, ir jāizmanto
nedaudz atšķirīgs mainīgā ievietošanas sintakse:
pēc @ mainīgā nosaukums jāieliek
cirtainajās iekavās. Apskatīsim to ar piemēriem.
Pieņemsim, ka mums ir šāds mainīgais:
@var: div;
Ievietosim šo mainīgo selektorā. Apskatīsim dažādas situācijas.
Piemērs
Ievietosim mūsu mainīgo kā selektoru:
@{var} {
font-size: 20px;
}
Kompilācijas rezultāts:
div {
font-size: 20px;
}
Piemērs
Pieņemsim, ka tagad mūsu mainīgajā ir daļa no selektora:
main @{var} {
font-size: 20px;
}
Kompilācijas rezultāts:
main div {
font-size: 20px;
}
Piemērs
Pieņemsim, ka tagad mēs sakām, ka mūsu mainīgajā
saturas nevis elementa nosaukums, bet tā id.
Pievienosim režģi pirms mainīgā nosaukuma:
#@{var} {
font-size: 20px;
}
Kompilācijas rezultāts:
#div {
font-size: 20px;
}
Piemērs
Pieņemsim, ka tagad mēs sakām, ka mūsu mainīgajā saturas nevis elementa nosaukums, bet tā klase. Pievienosim punktu pirms mainīgā nosaukuma:
.@{var} {
font-size: 20px;
}
Kompilācijas rezultāts:
.div {
font-size: 20px;
}
Praktiskie uzdevumi
Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:
@var: ul;
@{var} {
font-size: 20px;
}
Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:
@var: ul;
div @{var} {
font-size: 20px;
}
Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:
@var: ul;
div @{var} {
font-size: 20px;
}
Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:
@var: ul;
@{var} li {
font-size: 20px;
}
Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:
@var: list;
.@{var} {
font-size: 20px;
}
Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:
@var: list;
#@{var} li {
font-size: 20px;
}
Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:
@var: list;
.@{var} li {
font-size: 20px;
}
Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:
@var: .block;
ul@{var} {
font-size: 20px;
}
Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:
@var: a;
@{var}:hover {
text-decoration: none;
}
Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
