Блок кода в переменной LESS

В переменную можно записать не только значение, а целый блок кода, вот так:

@test: {
	width: 100px;
	height: 100px;
}

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

div {
	@test();
}

В результате после компиляции у нас получится следующий код:

div {
	width: 100px;
	height: 100px;
}

Применение: псевлоклассы

Давайте сделаем функцию, которая будет задавать стили ссылки в состоянии hover.

Пусть эта функция параметром принимает блок кода:

.hover(@code) {
	
}

Давайте выведем переданный блок кода внутри состояния hover:

.hover(@code) {
	&:hover {
		@code();
	}
}

Воспользуемся нашей фукцией внутри ссылки:

a {
	color: red;
	
	.hover({
		color: blue;
		text-decoration: none;
	});
}

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

a {
	color: red;
}
a:hover {
	color: blue;
	text-decoration: none;
}

Сделайте аналогичную функцию, которая будет задавать стили для инпута в состоянии focus.

Давайте сделаем функцию, задающую ключевые кадры анимации:

.keyframes(@name, @code) {
	@keyframes @name {@code();}
}

Воспользуемся нашей функцией:

.keyframes(anim, {
	from {
		width: 100px;
	}
	to {
		width: 200px;
	}
});

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

@keyframes anim {
	from {
		width: 100px;
	}
	to {
		width: 200px;
	}
}