Variabelen binnen selectors in LESS
Variabelen kunnen ook binnen selectors worden gebruikt.
Hiervoor is echter een
iets andere syntaxis voor het invoegen van variabelen nodig:
na @ moet de variabelenaam
in accolades worden geplaatst. Laten we eens kijken naar voorbeelden.
Stel dat we de volgende variabele hebben:
@var: div;
Laten we deze variabele invoegen in de selector. Laten we verschillende situaties bekijken.
Voorbeeld
Laten we onze variabele invoegen als selector:
@{var} {
font-size: 20px;
}
Resultaat van compilatie:
div {
font-size: 20px;
}
Voorbeeld
Stel dat onze variabele nu een deel van de selector bevat:
main @{var} {
font-size: 20px;
}
Resultaat van compilatie:
main div {
font-size: 20px;
}
Voorbeeld
Stel dat we nu zeggen dat in onze variabele
niet de tag naam zit, maar zijn id.
Laten we een hekje toevoegen voor de variabelenaam:
#@{var} {
font-size: 20px;
}
Resultaat van compilatie:
#div {
font-size: 20px;
}
Voorbeeld
Stel dat we nu zeggen dat in onze variabele niet de tag naam zit, maar zijn klasse. Laten we een punt toevoegen voor de variabelenaam:
.@{var} {
font-size: 20px;
}
Resultaat van compilatie:
.div {
font-size: 20px;
}
Praktische taken
Vertel wat het resultaat zal zijn van de compilatie van de volgende code:
@var: ul;
@{var} {
font-size: 20px;
}
Vertel wat het resultaat zal zijn van de compilatie van de volgende code:
@var: ul;
div @{var} {
font-size: 20px;
}
Vertel wat het resultaat zal zijn van de compilatie van de volgende code:
@var: ul;
div @{var} {
font-size: 20px;
}
Vertel wat het resultaat zal zijn van de compilatie van de volgende code:
@var: ul;
@{var} li {
font-size: 20px;
}
Vertel wat het resultaat zal zijn van de compilatie van de volgende code:
@var: list;
.@{var} {
font-size: 20px;
}
Vertel wat het resultaat zal zijn van de compilatie van de volgende code:
@var: list;
#@{var} li {
font-size: 20px;
}
Vertel wat het resultaat zal zijn van de compilatie van de volgende code:
@var: list;
.@{var} li {
font-size: 20px;
}
Vertel wat het resultaat zal zijn van de compilatie van de volgende code:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Vertel wat het resultaat zal zijn van de compilatie van de volgende code:
@var: list;
ul.@{var} li {
font-size: 20px;
}
Vertel wat het resultaat zal zijn van de compilatie van de volgende code:
@var: .block;
ul@{var} {
font-size: 20px;
}
Vertel wat het resultaat zal zijn van de compilatie van de volgende code:
@var: .block;
ul@{var} li {
font-size: 20px;
}
Vertel wat het resultaat zal zijn van de compilatie van de volgende code:
@var: a;
@{var}:hover {
text-decoration: none;
}
Vertel wat het resultaat zal zijn van de compilatie van de volgende code:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
Vertel wat het resultaat zal zijn van de compilatie van de volgende code:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
