LESS में मिक्सिन

इस पाठ में हम मिक्सिन (मिश्रण) से परिचित होंगे, जो एक वर्ग को दूसरे के अंदर शामिल करने की अनुमति देता है। आइए समझते हैं कि यह क्या है और इसके साथ कैसे काम किया जाता है।

मूल रूप से मिश्रण एक दूसरे के अंदर कुछ वर्गों का उपयोग है, जब एक वर्ग एक टेम्पलेट होता है - कोड का एक निश्चित हिस्सा, जिसे हम कई स्थानों पर उपयोग कर सकते हैं।

यह कितना सुविधाजनक है? शुद्ध CSS में हमें हर जगह टेम्पलेट कोड टाइप करना होगा जहाँ इसकी आवश्यकता होगी, लेकिन LESS में हम इसे एक जगह लिख सकते हैं और फिर कोड के आवश्यक स्थानों पर इसे कनेक्ट कर सकते हैं।

आइए एक उदाहरण देखें। मान लीजिए कि हमारे पास निम्नलिखित वर्ग है:

styles.less.mix {
  width: 100px;
  height: 100px;
}

आइए इस वर्ग को मिश्रण के रूप में उपयोग करें:

styles.lessp {
  .mix;
  color: red;
}

परिणामस्वरूप, कंपाइलेशन के बाद हमारे वर्ग की स्टाइल पैराग्राफ में डाल दी जाएंगी:

styles.cssp {
  width: 100px;
  height: 100px;
  color: red;
}

styles.less.mix {
  color: white;
  background: black;
}

p {
  .mix;
  width: 300px;
}