Veranderlikes binne selektors in LESS
Veranderlikes kan ook binne selektors gebruik word.
Vir hierdie doel moet egter 'n effens ander sintaksis
vir die invoeging van die veranderlike gebruik word:
na @ moet die veranderlike se naam
in krulhakies geplaas word. Laat ons kyk na voorbeelde.
Gestel ons het die volgende veranderlike:
@var: div;
Kom ons voeg hierdie veranderlike in die selektor in. Kom ons kyk na verskillende situasies.
Voorbeeld
Laat ons ons veranderlike as 'n selektor invoeg:
@{var} {
font-size: 20px;
}
Resultaat van kompilering:
div {
font-size: 20px;
}
Voorbeeld
Gestel ons veranderlike bevat nou 'n deel van die selektor:
main @{var} {
font-size: 20px;
}
Resultaat van kompilering:
main div {
font-size: 20px;
}
Voorbeeld
Gestel ons sê nou dat ons veranderlike
nie die etiketnaam bevat nie, maar sy id.
Voeg 'n hekies voor die veranderlike se naam:
#@{var} {
font-size: 20px;
}
Resultaat van kompilering:
#div {
font-size: 20px;
}
Voorbeeld
Gestel ons sê nou dat ons veranderlike nie die etiketnaam bevat nie, maar sy klas. Voeg 'n punt voor die veranderlike se naam:
.@{var} {
font-size: 20px;
}
Resultaat van kompilering:
.div {
font-size: 20px;
}
Praktiese take
Vertel wat die resultaat van die kompilering van die volgende kode sal wees:
@var: ul;
@{var} {
font-size: 20px;
}
Vertel wat die resultaat van die kompilering van die volgende kode sal wees:
@var: ul;
div @{var} {
font-size: 20px;
}
Vertel wat die resultaat van die kompilering van die volgende kode sal wees:
@var: ul;
div @{var} {
font-size: 20px;
}
Vertel wat die resultaat van die kompilering van die volgende kode sal wees:
@var: ul;
@{var} li {
font-size: 20px;
}
Vertel wat die resultaat van die kompilering van die volgende kode sal wees:
@var: list;
.@{var} {
font-size: 20px;
}
Vertel wat die resultaat van die kompilering van die volgende kode sal wees:
@var: list;
#@{var} li {
font-size: 20px;
}
Vertel wat die resultaat van die kompilering van die volgende kode sal wees:
@var: list;
.@{var} li {
font-size: 20px;
}
Vertel wat die resultaat van die kompilering van die volgende kode sal wees:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Vertel wat die resultaat van die kompilering van die volgende kode sal wees:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Vertel wat die resultaat van die kompilering van die volgende kode sal wees:
@var: .block;
ul@{var} {
font-size: 20px;
}
Vertel wat die resultaat van die kompilering van die volgende kode sal wees:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Vertel wat die resultaat van die kompilering van die volgende kode sal wees:
@var: a;
@{var}:hover {
text-decoration: none;
}
Vertel wat die resultaat van die kompilering van die volgende kode sal wees:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Vertel wat die resultaat van die kompilering van die volgende kode sal wees:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
