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