Медыязапыты ў 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, якая задае стылі для дэсктопаў.