К содержанию

Veranderlikes binne selektors in LESS

Veranderlikes kan ook binne selektors gebruik word. Vir hierdie doel moet egter 'n effens ander sintaksis vir die invoeging van die veranderlike gebruik word: na @ moet die veranderlike se naam in krulhakies geplaas word. Laat ons kyk na voorbeelde. Gestel ons het die volgende veranderlike:

styles.less@var: div;

Kom ons voeg hierdie veranderlike in die selektor in. Kom ons kyk na verskillende situasies.

Voorbeeld

Laat ons ons veranderlike as 'n selektor invoeg:

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

Resultaat van kompilering:

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

Voorbeeld

Gestel ons veranderlike bevat nou 'n deel van die selektor:

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

Resultaat van kompilering:

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

Voorbeeld

Gestel ons sê nou dat ons veranderlike nie die etiketnaam bevat nie, maar sy id. Voeg 'n hekies voor die veranderlike se naam:

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

Resultaat van kompilering:

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

Voorbeeld

Gestel ons sê nou dat ons veranderlike nie die etiketnaam bevat nie, maar sy klas. Voeg 'n punt voor die veranderlike se naam:

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

Resultaat van kompilering:

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

Praktiese take

Задание 1

Vertel wat die resultaat van die kompilering van die volgende kode sal wees:

styles.less@var: ul;

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

Задание 2

Vertel wat die resultaat van die kompilering van die volgende kode sal wees:

styles.less@var: ul;

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

Задание 3

Vertel wat die resultaat van die kompilering van die volgende kode sal wees:

styles.less@var: ul;

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

Задание 4

Vertel wat die resultaat van die kompilering van die volgende kode sal wees:

styles.less@var: ul;

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

Задание 5

Vertel wat die resultaat van die kompilering van die volgende kode sal wees:

styles.less@var: list;

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

Задание 6

Vertel wat die resultaat van die kompilering van die volgende kode sal wees:

styles.less@var: list;

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

Задание 7

Vertel wat die resultaat van die kompilering van die volgende kode sal wees:

styles.less@var: list;

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

Задание 8

Vertel wat die resultaat van die kompilering van die volgende kode sal wees:

styles.less@var: list;

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

Задание 9

Vertel wat die resultaat van die kompilering van die volgende kode sal wees:

styles.less@var: list;

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

Задание 10

Vertel wat die resultaat van die kompilering van die volgende kode sal wees:

styles.less@var: .block;

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

Задание 11

Vertel wat die resultaat van die kompilering van die volgende kode sal wees:

styles.less@var: .block;

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

Задание 12

Vertel wat die resultaat van die kompilering van die volgende kode sal wees:

styles.less@var: a;

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

Задание 13

Vertel wat die resultaat van die kompilering van die volgende kode sal wees:

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

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

Задание 14

Vertel wat die resultaat van die kompilering van die volgende kode sal wees:

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

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