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 ֆունկցիան, որն սահմանում է դեսկտոպների համար նախատեսված ոճերը: