Variabler inde i selektorer i LESS
Variabler kan også bruges inde i selektorer.
Dog skal man bruge en
lidt anden syntaks for at indsætte variablen:
efter @ skal variabelnavnet
omgives af krøllede parenteser. Lad os se på eksempler.
Lad os sige, at vi har følgende variabel:
@var: div;
Lad os indsætte denne variabel i en selektor. Lad os overveje forskellige situationer.
Eksempel
Lad os indsætte vores variabel som selektor:
@{var} {
font-size: 20px;
}
Kompileringsresultat:
div {
font-size: 20px;
}
Eksempel
Lad os nu sige, at vores variabel indeholder en del af selektoren:
main @{var} {
font-size: 20px;
}
Kompileringsresultat:
main div {
font-size: 20px;
}
Eksempel
Lad os nu sige, at vi siger, at vores variabel
indeholder ikke et tag-navn, men dens id.
Lad os tilføje en hashtag foran variabelnavnet:
#@{var} {
font-size: 20px;
}
Kompileringsresultat:
#div {
font-size: 20px;
}
Eksempel
Lad os nu sige, at vi siger, at vores variabel indeholder ikke et tag-navn, men dens klasse. Lad os tilføje en punktum foran variabelnavnet:
.@{var} {
font-size: 20px;
}
Kompileringsresultat:
.div {
font-size: 20px;
}
Praktiske opgaver
Fortæl, hvad resultatet af kompileringen af følgende kode vil være:
@var: ul;
@{var} {
font-size: 20px;
}
Fortæl, hvad resultatet af kompileringen af følgende kode vil være:
@var: ul;
div @{var} {
font-size: 20px;
}
Fortæl, hvad resultatet af kompileringen af følgende kode vil være:
@var: ul;
div @{var} {
font-size: 20px;
}
Fortæl, hvad resultatet af kompileringen af følgende kode vil være:
@var: ul;
@{var} li {
font-size: 20px;
}
Fortæl, hvad resultatet af kompileringen af følgende kode vil være:
@var: list;
.@{var} {
font-size: 20px;
}
Fortæl, hvad resultatet af kompileringen af følgende kode vil være:
@var: list;
#@{var} li {
font-size: 20px;
}
Fortæl, hvad resultatet af kompileringen af følgende kode vil være:
@var: list;
.@{var} li {
font-size: 20px;
}
Fortæl, hvad resultatet af kompileringen af følgende kode vil være:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Fortæl, hvad resultatet af kompileringen af følgende kode vil være:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Fortæl, hvad resultatet af kompileringen af følgende kode vil være:
@var: .block;
ul@{var} {
font-size: 20px;
}
Fortæl, hvad resultatet af kompileringen af følgende kode vil være:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Fortæl, hvad resultatet af kompileringen af følgende kode vil være:
@var: a;
@{var}:hover {
text-decoration: none;
}
Fortæl, hvad resultatet af kompileringen af følgende kode vil være:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Fortæl, hvad resultatet af kompileringen af følgende kode vil være:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
