Медиадархостҳо дар 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-ро созед, ки услубҳоро барои компютерҳои рӯимизӣ муайян мекунад.