Variabler inne i selektorer i LESS
Variabler kan også brukes inne i selektorer.
For dette må man imidlertid bruke
litt annen syntaks for innsetting av variabel:
etter @ må variabelnavnet omgjøres
med krøllparenteser. La oss se på eksempler.
La oss si at vi har følgende variabel:
@var: div;
La oss sette inn denne variabelen i en selektor. La oss vurdere ulike situasjoner.
Eksempel
La oss sette inn variabelen vår som selektor:
@{var} {
font-size: 20px;
}
Kompileringsresultat:
div {
font-size: 20px;
}
Eksempel
La oss nå si at variabelen vår inneholder en del av selektoren:
main @{var} {
font-size: 20px;
}
Kompileringsresultat:
main div {
font-size: 20px;
}
Eksempel
La oss nå si at vi sier at i variabelen vår
ligger ikke navnet på taggen, men dens id.
La oss legge til en hashtag foran variabelnavnet:
#@{var} {
font-size: 20px;
}
Kompileringsresultat:
#div {
font-size: 20px;
}
Eksempel
La oss nå si at vi sier at i variabelen vår ligger ikke navnet på taggen, men dens klasse. La oss legge til en punktum foran variabelnavnet:
.@{var} {
font-size: 20px;
}
Kompileringsresultat:
.div {
font-size: 20px;
}
Praktiske oppgaver
Fortell hva resultatet av kompilering av følgende kode vil være:
@var: ul;
@{var} {
font-size: 20px;
}
Fortell hva resultatet av kompilering av følgende kode vil være:
@var: ul;
div @{var} {
font-size: 20px;
}
Fortell hva resultatet av kompilering av følgende kode vil være:
@var: ul;
div @{var} {
font-size: 20px;
}
Fortell hva resultatet av kompilering av følgende kode vil være:
@var: ul;
@{var} li {
font-size: 20px;
}
Fortell hva resultatet av kompilering av følgende kode vil være:
@var: list;
.@{var} {
font-size: 20px;
}
Fortell hva resultatet av kompilering av følgende kode vil være:
@var: list;
#@{var} li {
font-size: 20px;
}
Fortell hva resultatet av kompilering av følgende kode vil være:
@var: list;
.@{var} li {
font-size: 20px;
}
Fortell hva resultatet av kompilering av følgende kode vil være:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Fortell hva resultatet av kompilering av følgende kode vil være:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Fortell hva resultatet av kompilering av følgende kode vil være:
@var: .block;
ul@{var} {
font-size: 20px;
}
Fortell hva resultatet av kompilering av følgende kode vil være:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Fortell hva resultatet av kompilering av følgende kode vil være:
@var: a;
@{var}:hover {
text-decoration: none;
}
Fortell hva resultatet av kompilering av følgende kode vil være:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Fortell hva resultatet av kompilering av følgende kode vil være:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
