LESS में मीडिया क्वेरीज़

आइए एक फ़ंक्शन बनाएं जो एलिमेंट में मीडिया क्वेरी जोड़ेगा। उदाहरण के लिए मान लीजिए कि यह मोबाइल डिवाइसों के लिए स्टाइल को नियंत्रित करने वाली क्वेरी है। आइए अपने फ़ंक्शन को उसी के अनुसार नाम दें:

styles.less.mobile(@code) {

}

हमारा फ़ंक्शन एक पैरामीटर के रूप में कोड का एक ब्लॉक स्वीकार करेगा। आइए इस ब्लॉक को मीडिया क्वेरी के अंदर आउटपुट करें:

styles.less.mobile(@code) {
  @media (max-width: 600px) {
    @code();
  }
}

आइए अब अपने फ़ंक्शन का उपयोग करें:

styles.lessdiv {
  .mobile({
    width: 300px;
  });
}

परिणामस्वरूप, कंपाइलेशन के बाद हमारा डिव मीडिया क्वेरी के अंदर आ जाएगा, और उसे संबंधित स्टाइल्स मिल जाएंगी:

styles.less@media (max-width: 600px) {
  div {
    width: 300px;
  }
}