# Переменные внутри селекторов в LESS

Переменные можно использовать и внутри селекторов. Для этого, однако, нужно воспользоваться немного другим синтаксисом вставки переменной: после `@` имя переменной нужно взять в фигурные скобки. Давайте посмотрим на примерах. Пусть у нас есть следующая переменная:

`@var: div;`

Давайте выполним вставку этой переменной в селектор. Рассмотрим различные ситуации.

## Пример

Выполним вставку нашей переменной в качестве селектора:

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

Результат компиляции:

`div { font-size: 20px; }`

## Пример

Пусть теперь наша переменная содержит часть селектора:

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

Результат компиляции:

`main div { font-size: 20px; }`

## Пример

Пусть теперь мы говорим, что в нашей переменной содержится не имя тега, а его `id`. Добавим перед именем переменной решетку:

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

Результат компиляции:

`#div { font-size: 20px; }`

## Пример

Пусть теперь мы говорим, что в нашей переменной содержится не имя тега, а его класс. Добавим перед именем переменной точку:

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

Результат компиляции:

`.div { font-size: 20px; }`

## Практические задачи

Расскажите, каким будет результат компиляции следующего кода:

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

Расскажите, каким будет результат компиляции следующего кода:

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

Расскажите, каким будет результат компиляции следующего кода:

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

Расскажите, каким будет результат компиляции следующего кода:

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

Расскажите, каким будет результат компиляции следующего кода:

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

Расскажите, каким будет результат компиляции следующего кода:

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

Расскажите, каким будет результат компиляции следующего кода:

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

Расскажите, каким будет результат компиляции следующего кода:

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

Расскажите, каким будет результат компиляции следующего кода:

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

Расскажите, каким будет результат компиляции следующего кода:

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

Расскажите, каким будет результат компиляции следующего кода:

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

Расскажите, каким будет результат компиляции следующего кода:

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

Расскажите, каким будет результат компиляции следующего кода:

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

Расскажите, каким будет результат компиляции следующего кода:

`@var1: block1; @var2: block2; .@{var1}.@{var2} { font-size: 20px; }`
← →
↑