Variabler inuti selektorer i LESS
Variabler kan också användas inuti selektorer.
För att göra detta behöver man dock använda
en lite annorlunda syntax för variabelinsättning:
efter @ måste variabelnamnet omges
av klammerparenteser. Låt oss titta på exempel.
Antag att vi har följande variabel:
@var: div;
Låt oss sätta in denna variabel i en selektor. Låt oss överväga olika situationer.
Exempel
Låt oss sätta in vår variabel som en selektor:
@{var} {
font-size: 20px;
}
Resultat av kompilering:
div {
font-size: 20px;
}
Exempel
Antag nu att vår variabel innehåller en del av selektorn:
main @{var} {
font-size: 20px;
}
Resultat av kompilering:
main div {
font-size: 20px;
}
Exempel
Antag nu att vi säger att i vår variabel
innehålls inte taggnamnet, utan dess id.
Lägg till ett nummertecken framför variabelnamnet:
#@{var} {
font-size: 20px;
}
Resultat av kompilering:
#div {
font-size: 20px;
}
Exempel
Antag nu att vi säger att i vår variabel innehålls inte taggnamnet, utan dess klass. Lägg till en punkt framför variabelnamnet:
.@{var} {
font-size: 20px;
}
Resultat av kompilering:
.div {
font-size: 20px;
}
Praktiska uppgifter
Berätta vad som blir resultatet av kompilering av följande kod:
@var: ul;
@{var} {
font-size: 20px;
}
Berätta vad som blir resultatet av kompilering av följande kod:
@var: ul;
div @{var} {
font-size: 20px;
}
Berätta vad som blir resultatet av kompilering av följande kod:
@var: ul;
div @{var} {
font-size: 20px;
}
Berätta vad som blir resultatet av kompilering av följande kod:
@var: ul;
@{var} li {
font-size: 20px;
}
Berätta vad som blir resultatet av kompilering av följande kod:
@var: list;
.@{var} {
font-size: 20px;
}
Berätta vad som blir resultatet av kompilering av följande kod:
@var: list;
#@{var} li {
font-size: 20px;
}
Berätta vad som blir resultatet av kompilering av följande kod:
@var: list;
.@{var} li {
font-size: 20px;
}
Berätta vad som blir resultatet av kompilering av följande kod:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Berätta vad som blir resultatet av kompilering av följande kod:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Berätta vad som blir resultatet av kompilering av följande kod:
@var: .block;
ul@{var} {
font-size: 20px;
}
Berätta vad som blir resultatet av kompilering av följande kod:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Berätta vad som blir resultatet av kompilering av följande kod:
@var: a;
@{var}:hover {
text-decoration: none;
}
Berätta vad som blir resultatet av kompilering av följande kod:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Berätta vad som blir resultatet av kompilering av följande kod:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
