LESS में नामित चरों का अनुकरण करना (jsFiddle में एक उदाहरण के साथ)

समझा दो, मैं नहीं करूंगा। लेकिन मैं कुछ शब्द कहूंगा।

LESS एक गतिशील शैली मार्कअप भाषा है जो मानक CSS में कोड संकलित करती है। LESS चर *, संचालन और कार्यों (गैर-एक्स्टेंसिबल सेट) के साथ-साथ मिश्रण ** का उपयोग करता है, जो पैरामीटर ले सकता है। संकलन में मिश्रणों को शैलियों द्वारा प्रतिस्थापित किया जाता है। संचालन और कार्य - गणना के परिणामों द्वारा।

समस्या

मिक्सिंग स्वीकार करने वाले मापदंडों की घोषणा करते समय, डिफ़ॉल्ट पैरामीटर मानों को इंगित किया जाना चाहिए। यह अनुमति देता है, यदि वांछित है, तो पैरामीटर के सभी या भाग को पारित किए बिना मिक्सर को कॉल करने के लिए। लेकिन LESS में मिश्रक अभी तक नामित मापदंडों का समर्थन नहीं करता है। यही है, अगर मिश्रण 10 मापदंडों के साथ घोषित किया जाता है और आपको क्रम में केवल दसवें के मूल्य को बदलने की आवश्यकता है, तो आपको पिछले नौ को भी पास करना होगा। हां, डिफ़ॉल्ट मानों के साथ।

प्रारंभिक स्थितियों

अंकन

<div class="base-1">  "BASE-1" </div> <div class="extension">  "EXTENSION" </div> <div class="base-2">  "BASE-2" </div> 

लेस स्टाइल्स

 /*     - */ .f-border ( @width: 4px, @style: solid, @color: #BE2 ) { border: @width @style @color; } /*     */ .base-1 { .f-border; } /*   c  */ /*      */ .extension { .f-border(4px, solid, #F16); } /*     */ .base-2 { .f-border; } 

परिणाम

स्रोत कोड jsFiddle.net *** पर।

समस्या

.extension क्लास में, एक .extension पैरामीटर के बजाय तीन को .extension में पास किया जाता है, जिनमें से दो डिफ़ॉल्ट मानों के साथ मेल खाते हैं। इस विशेष मामले में, यह कोई समस्या नहीं है, क्योंकि कुछ पैरामीटर हैं। लेकिन, उदाहरण के लिए, एक जटिल उपयोगकर्ता इंटरफ़ेस से संबंधित मेरी परियोजना में, टैब शैलियों को बनाने के लिए मिश्रण 18 पैरामीटर लेता है। जाहिर है, बड़ी परियोजनाओं में LESS के लाभों को नामांकित मापदंडों की अनुपस्थिति से काफी छूट मिलती है।

निर्णय

चर और मिश्रण के दायरे यहां बचाव के लिए आते हैं। डिफ़ॉल्ट पैरामीटर मानों को चर में ले जाया जा सकता है। मिक्सी की घोषणा करते समय, उपरोक्त चर को डिफ़ॉल्ट मान के रूप में पास करें। किसी भी वर्ग से मिक्सिन को कॉल करने से पहले, परिवर्तनशील मापदंडों के लिए चर बदलें। बिना मापदंडों के एक मिश्रण को कॉल करें (या क्रम में कई मापदंडों के साथ)। चूंकि चर वर्ग के दायरे में बदलता है, मिक्सिन को बदले हुए मूल्य के साथ कहा जाता है। कार्यक्षेत्र छोड़ते समय, चर अपने पूर्व निर्धारित मूल्यों पर लौट आएंगे।

लेस स्टाइल्स

 /*  */ @f-border-width: 4px; @f-border-style: solid; @f-border-color: #BE2; /*   */ /*  - -  */ .f-border ( @width: @f-border-width, @style: @f-border-style, @color: @f-border-color ) { border: @width @style @color; } /*     */ .base-1 { .f-border; } /*       */ /*     */ .extension { @f-border-color: #F16; .f-border; } /*     */ .base-2 { .f-border; } 

परिणाम

स्रोत कोड jsFiddle.net पर ।

टिप्पणी:

* LESS की आधिकारिक वेबसाइट कहती है कि "चर वास्तव में स्थिरांक हैं, क्योंकि उन्हें फिर से परिभाषित नहीं किया जा सकता है।" लेकिन एक और नज़रिया है ।
** इस तथ्य के बावजूद कि "मिश्रण" के रूप में मूल "मिक्सिन" के अनुवाद के समर्थक हैं , तकनीक के साथ उधार लेने की शर्तें भाषा के लिए अधिक कार्बनिक हैं, क्योंकि बाहरी संदर्भों के बिना उधार अर्थ में समान है।
*** jsFiddle.net पर LESS के साथ काम करने के लिए, आपको संसाधनों के माध्यम से कम। Js फ़ाइल को कनेक्ट करने की आवश्यकता है, और जावास्क्रिप्ट एडिट पैनल में दो लाइनें जोड़ें

 document.getElementsByTagName('head')[0].getElementsByTagName('style')[0].type = 'text/less'; less.refreshStyles();