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 बनाएं, जो
डेस्कटॉप के लिए स्टाइल्स सेट करे।
