Медија-записи во 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, која задава стилови за десктоп компјутери.