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

Переменные в LESS

Математические операции в LESS

Свойство animation-fill-mode - состояние анимации перед началом и после окончания

Переменные в SASS

Тег meter - вывод значений в диапазоне (HTML5)

Выравнивание флекс элементов по главной оси в CSS

Чат с GPT Компилятор