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 функциясын жасаңыз.