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 функциясини ясанг.