К содержанию

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:

styles.less@var: div;

Laten we deze variabele invoegen in de selector. Laten we verschillende situaties bekijken.

Voorbeeld

Laten we onze variabele invoegen als selector:

styles.less@{var} {
  font-size: 20px;
}

Resultaat van compilatie:

styles.cssdiv {
  font-size: 20px;
}

Voorbeeld

Stel dat onze variabele nu een deel van de selector bevat:

styles.lessmain @{var} {
  font-size: 20px;
}

Resultaat van compilatie:

styles.cssmain 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:

styles.less#@{var} {
  font-size: 20px;
}

Resultaat van compilatie:

styles.css#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:

styles.less.@{var} {
  font-size: 20px;
}

Resultaat van compilatie:

styles.css.div {
  font-size: 20px;
}

Praktische taken

Задание 1

Vertel wat het resultaat zal zijn van de compilatie van de volgende code:

styles.less@var: ul;

@{var} {
  font-size: 20px;
}

Задание 2

Vertel wat het resultaat zal zijn van de compilatie van de volgende code:

styles.less@var: ul;

div @{var} {
  font-size: 20px;
}

Задание 3

Vertel wat het resultaat zal zijn van de compilatie van de volgende code:

styles.less@var: ul;

div @{var} {
  font-size: 20px;
}

Задание 4

Vertel wat het resultaat zal zijn van de compilatie van de volgende code:

styles.less@var: ul;

@{var} li {
  font-size: 20px;
}

Задание 5

Vertel wat het resultaat zal zijn van de compilatie van de volgende code:

styles.less@var: list;

.@{var} {
  font-size: 20px;
}

Задание 6

Vertel wat het resultaat zal zijn van de compilatie van de volgende code:

styles.less@var: list;

#@{var} li {
  font-size: 20px;
}

Задание 7

Vertel wat het resultaat zal zijn van de compilatie van de volgende code:

styles.less@var: list;

.@{var} li {
  font-size: 20px;
}

Задание 8

Vertel wat het resultaat zal zijn van de compilatie van de volgende code:

styles.less@var: list;

ul.@{var} li {
  font-size: 20px;
}

Задание 9

Vertel wat het resultaat zal zijn van de compilatie van de volgende code:

styles.less@var: list;

ul.@{var} li {
  font-size: 20px;
}

Задание 10

Vertel wat het resultaat zal zijn van de compilatie van de volgende code:

styles.less@var: .block;

ul@{var} {
  font-size: 20px;
}

Задание 11

Vertel wat het resultaat zal zijn van de compilatie van de volgende code:

styles.less@var: .block;

ul@{var} li {
  font-size: 20px;
}

Задание 12

Vertel wat het resultaat zal zijn van de compilatie van de volgende code:

styles.less@var: a;

@{var}:hover {
  text-decoration: none;
}

Задание 13

Vertel wat het resultaat zal zijn van de compilatie van de volgende code:

styles.less@var1: div;
@var2: a;

@{var1} @{var2}:hover {
  text-decoration: none;
}

Задание 14

Vertel wat het resultaat zal zijn van de compilatie van de volgende code:

styles.less@var1: block1;
@var2: block2;

.@{var1}.@{var2} {
  font-size: 20px;
}