მედიამოთხოვნები 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, რომელიც აწესებს სტილებს დესკტოპებისთვის.