К содержанию

Переменные внутри селекторов в 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;
}