LESS-ի մեջ փոփոխականներ ընտրողների ներսում

Փոփոխականները կարող են օգտագործվել նաև ընտրողների ներսում։ Սակայն դրա համար անհրաժեշտ է օգտագործել փոփոխականի տեղադրման մի փոքր այլ շարահյուսություն. @ նշանից հետո փոփոխականի անունը պետք է վերցնել գանգուր փակագծերի մեջ։ Դիտարկենք օրինակներով։ Ենթադրենք, մենք ունենք հետևյալ փոփոխականը.

styles.less@var: div;

Եկեք կատարենք այս փոփոխականի տեղադրում ընտրողի մեջ։ Դիտարկենք տարբեր իրավիճակներ։

Օրինակ

Կատարենք մեր փոփոխականի տեղադրում որպես ընտրող.

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

Կոմպիլյացիայի արդյունքը.

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

Օրինակ

Ենթադրենք, հիմա մեր փոփոխականը պարունակում է ընտրողի մի մասը.

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

Կոմպիլյացիայի արդյունքը.

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

Օրինակ

Ենթադրենք, հիմա մենք ասում ենք, որ մեր փոփոխականում պարունակվում է ոչ թե տեգի անուն, այլ նրա id-ն։ Ավելացնենք փոփոխականի անունից առաջ ռեշետկա.

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

Կոմպիլյացիայի արդյունքը.

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

Օրինակ

Ենթադրենք, հիմա մենք ասում ենք, որ մեր փոփոխականում պարունակվում է ոչ թե տեգի անուն, այլ նրա դասը։ Ավելացնենք փոփոխականի անունից առաջ կետ.

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

Կոմպիլյացիայի արդյունքը.

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

Գործնական առաջադրանքներ

Задание 1

Պատմեք, թե ինչ կլինի հետևյալ կոդի կոմպիլյացիայի արդյունքը.

styles.less@var: ul;

@{var} {
  font-size: 20px;
}
Задание 2

Պատմեք, թե ինչ կլինի հետևյալ կոդի կոմպիլյացիայի արդյունքը.

styles.less@var: ul;

div @{var} {
  font-size: 20px;
}
Задание 3

Պատմեք, թե ինչ կլինի հետևյալ կոդի կոմպիլյացիայի արդյունքը.

styles.less@var: ul;

div @{var} {
  font-size: 20px;
}
Задание 4

Պատմեք, թե ինչ կլինի հետևյալ կոդի կոմպիլյացիայի արդյունքը.

styles.less@var: ul;

@{var} li {
  font-size: 20px;
}
Задание 5

Պատմեք, թե ինչ կլինի հետևյալ կոդի կոմպիլյացիայի արդյունքը.

styles.less@var: list;

.@{var} {
  font-size: 20px;
}
Задание 6

Պատմեք, թե ինչ կլինի հետևյալ կոդի կոմպիլյացիայի արդյունքը.

styles.less@var: list;

#@{var} li {
  font-size: 20px;
}
Задание 7

Պատմեք, թե ինչ կլինի հետևյալ կոդի կոմպիլյացիայի արդյունքը.

styles.less@var: list;

.@{var} li {
  font-size: 20px;
}
Задание 8

Պատմեք, թե ինչ կլինի հետևյալ կոդի կոմպիլյացիայի արդյունքը.

styles.less@var: list;

ul.@{var} li {
  font-size: 20px;
}
Задание 9

Պատմեք, թե ինչ կլինի հետևյալ կոդի կոմպիլյացիայի արդյունքը.

styles.less@var: list;

ul.@{var} li {
  font-size: 20px;
}
Задание 10

Պատմեք, թե ինչ կլինի հետևյալ կոդի կոմպիլյացիայի արդյունքը.

styles.less@var: .block;

ul@{var} {
  font-size: 20px;
}
Задание 11

Պատմեք, թե ինչ կլինի հետևյալ կոդի կոմպիլյացիայի արդյունքը.

styles.less@var: .block;

ul@{var} li {
  font-size: 20px;
}
Задание 12

Պատմեք, թե ինչ կլինի հետևյալ կոդի կոմպիլյացիայի արդյունքը.

styles.less@var: a;

@{var}:hover {
  text-decoration: none;
}
Задание 13

Պատմեք, թե ինչ կլինի հետևյալ կոդի կոմպիլյացիայի արդյունքը.

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

@{var1} @{var2}:hover {
  text-decoration: none;
}
Задание 14

Պատմեք, թե ինչ կլինի հետևյալ կոդի կոմպիլյացիայի արդյունքը.

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

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