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 ফাংশন তৈরি করুন, যা ডেস্কটপের জন্য স্টাইল নির্ধারণ করে।