Медиа заявки в LESS

Нека направим функция, която ще добавя към елемента медиа заявка. Нека за пример това да бъде заявка, регулираща стиловете за мобилни устройства. Ще наречем нашата функция съответно:

.mobile(@code) {

}

Нашата функция параметър ще приема блок код. Нека изведем този блок вътре в медиа заявката:

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

Сега ще използваме нашата функция:

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

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

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

Направете функция tablet, задаваща стилове за таблети.

Направете функция gadget, задаваща стилове за мобилни телефони и таблети.

Направете функция notebook, задаваща стилове за лаптопи.

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