Медиазапросы в LESS

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

.mobile(@code) {

}

Наша функция параметром будет принимать блок кода. Давайте выведем этот блок внутри медиазапроса:

.mobile(@code) {
	@media (max-width: 600px) {
		@code();
	}
}

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

div {
	.mobile({
		width: 300px;
	});
}

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

@media (max-width: 600px) {
	div {
		width: 300px;
	}
}

Сделайте функцию tablet, задающие стили для планшетов.

Сделайте функцию gadget, задающие стили для мобильников и планшетов.

Сделайте функцию notebook, задающие стили для ноутбуков.

Сделайте функцию desktop, задающие стили для декстопов.