К содержанию

Mainīgie LESS selektoros

Mainīgos var izmantot arī selektoru iekšienē. Tomēr, lai to izdarītu, ir jāizmanto nedaudz atšķirīgs mainīgā ievietošanas sintakse: pēc @ mainīgā nosaukums jāieliek cirtainajās iekavās. Apskatīsim to ar piemēriem. Pieņemsim, ka mums ir šāds mainīgais:

styles.less@var: div;

Ievietosim šo mainīgo selektorā. Apskatīsim dažādas situācijas.

Piemērs

Ievietosim mūsu mainīgo kā selektoru:

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

Kompilācijas rezultāts:

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

Piemērs

Pieņemsim, ka tagad mūsu mainīgajā ir daļa no selektora:

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

Kompilācijas rezultāts:

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

Piemērs

Pieņemsim, ka tagad mēs sakām, ka mūsu mainīgajā saturas nevis elementa nosaukums, bet tā id. Pievienosim režģi pirms mainīgā nosaukuma:

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

Kompilācijas rezultāts:

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

Piemērs

Pieņemsim, ka tagad mēs sakām, ka mūsu mainīgajā saturas nevis elementa nosaukums, bet tā klase. Pievienosim punktu pirms mainīgā nosaukuma:

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

Kompilācijas rezultāts:

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

Praktiskie uzdevumi

Задание 1

Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:

styles.less@var: ul;

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

Задание 2

Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:

styles.less@var: ul;

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

Задание 3

Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:

styles.less@var: ul;

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

Задание 4

Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:

styles.less@var: ul;

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

Задание 5

Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:

styles.less@var: list;

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

Задание 6

Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:

styles.less@var: list;

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

Задание 7

Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:

styles.less@var: list;

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

Задание 8

Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:

styles.less@var: list;

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

Задание 9

Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:

styles.less@var: list;

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

Задание 10

Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:

styles.less@var: .block;

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

Задание 11

Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:

styles.less@var: .block;

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

Задание 12

Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:

styles.less@var: a;

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

Задание 13

Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:

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

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

Задание 14

Paskaidrojiet, kāds būs šāda koda kompilācijas rezultāts:

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

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