कम सीएसएस में फ़ंक्शंस का उपयोग कैसे करें

लेस सीएसएस एक मजबूत और गतिशील सीएसएस प्रीप्रोसेसर है जिसने हाल के वर्षों में महत्वपूर्ण ध्यान और लोकप्रियता हासिल की है। प्रीप्रोसेसर के रूप में, यह वेब में उपयोग की जाने वाली पारंपरिक सीएसएस स्टाइलिंग भाषा "वेनिला सीएसएस" के विस्तार के रूप में कार्य करता है। समग्र स्टाइल को बढ़ाने वाली अतिरिक्त सुविधाओं और कार्यात्मकताओं की एक श्रृंखला प्रदान करके विकास अनुभव।

यदि आप मानक सीएसएस लिखने में अच्छी तरह से वाकिफ हैं, तो आप बिना किसी तीव्र सीखने की अवस्था के कम सीएसएस का उपयोग करने के लिए सहजता से बदलाव कर सकते हैं। यह अनुकूलता लेस की उन्नत क्षमताओं का लाभ उठाते हुए आपके मौजूदा सीएसएस ज्ञान को बनाए रखना आसान बनाती है।

कार्य क्या हैं और वे महत्वपूर्ण क्यों हैं?

प्रोग्रामिंग में, एक फ़ंक्शन कोड का एक ब्लॉक होता है जो एक विशिष्ट कार्य करता है। आप इसे प्रोग्राम में कहीं और भी पुन: उपयोग कर सकते हैं। फ़ंक्शंस आमतौर पर डेटा लेते हैं, उसे संसाधित करते हैं और परिणाम लौटाते हैं।

वे किसी प्रोग्राम के भीतर डुप्लिकेट कोड को कम करना आसान बनाते हैं। उदाहरण के लिए, मान लें कि आपके पास एक प्रोग्राम है जो उपयोगकर्ता द्वारा दर्ज की गई कीमत के आधार पर छूट की गणना करता है। में एक जावास्क्रिप्ट जैसी भाषा, आप इसे इस तरह कार्यान्वित कर सकते हैं:

समारोहचेक छूट(कीमत, सीमा){
अगर (कीमत >= सीमा){
होने देना छूट = 5/100 * कीमत;
वापस करना`आपकी छूट $ है${छूट}`;
 } अन्य {
वापस करना`क्षमा करें, यह आइटम छूट के लिए योग्य नहीं है। `
 }
}

फिर आप फ़ंक्शन को कॉल कर सकते हैं और इसमें पास कर सकते हैं कीमत और यह सीमा.

होने देना कीमत = शीघ्र("वस्तु की कीमत दर्ज करें:")
चेतावनी (चेकडिस्काउंट (कीमत, 500))

छूट की जाँच करने के तर्क को दूर करके, प्रोग्राम न केवल पढ़ने योग्य है, बल्कि अब आपके पास कोड का एक पुन: प्रयोज्य ब्लॉक है जो छूट को संसाधित करता है और परिणाम देता है। फ़ंक्शंस और भी बहुत कुछ कर सकते हैं, लेकिन ये केवल मूल बातें हैं।

कम सीएसएस में कार्यों को समझना

पारंपरिक सीएसएस में, एक डेवलपर के रूप में आपके लिए कार्यों का एक बहुत ही सीमित सेट उपलब्ध होता है। CSS में सबसे लोकप्रिय कार्यों में से एक है कैल्क () गणित फ़ंक्शन जो बिल्कुल वैसा ही करता है जैसा वह दिखता है—यह गणना करता है और परिणाम को सीएसएस में संपत्ति मूल्य के रूप में उपयोग करता है।

पी{
पृष्ठभूमि का रंग: लाल;
चौड़ाई: कैल्क(13पिक्सल- 4पिक्सल);
}

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

@चौड़ाई: 10px;
@ऊंचाई: 20px;
डिव{
अंतर:अगर((@चौड़ाई > @ऊंचाई), 10px, 20px)
}

उपरोक्त कोड ब्लॉक में, लेस कंपाइलर जाँचता है कि क्या वेरिएबल चौड़ाई (द्वारा परिभाषित @ प्रतीक) चर से बड़ा है ऊंचाई. यदि शर्त सत्य है, तो फ़ंक्शन शर्त (10px) के बाद पहला मान लौटाता है। अन्यथा, फ़ंक्शन दूसरा मान (20px) लौटाता है।

संकलन के बाद, सीएसएस आउटपुट कुछ इस तरह दिखना चाहिए:

डिव {
अंतर: 20पिक्सल;
}

कम समय में बूलियन का उपयोग कैसे करें

बूलियन एक वेरिएबल है जिसमें दो संभावित मान होते हैं: सत्य या असत्य. साथ बूलियन() कम में फ़ंक्शन, आप बाद में उपयोग के लिए किसी अभिव्यक्ति के सही या गलत मान को एक चर में संग्रहीत कर सकते हैं। यह ऐसे काम करता है।

@पाठ का रंग: लाल;
@बीजी-रंग: बूलियन (@ टेक्स्ट-रंग = लाल);

उपरोक्त कोड ब्लॉक में, लेस कंपाइलर जाँच करता है कि क्या पाठ का रंग लाल है। फिर बीजी-रंग वेरिएबल मान को संग्रहीत करता है।

डिव{
पृष्ठभूमि का रंग: अगर(@बीजी-रंग,हरा पीला);
}

उपरोक्त कोड ब्लॉक कुछ इस तरह संकलित होता है:

डिव {
पृष्ठभूमि का रंग: हरा;
}

रिप्लेस() फ़ंक्शन के साथ एक स्ट्रिंग के भीतर टेक्स्ट को बदलना

के लिए वाक्यविन्यास बदलना() फ़ंक्शन इस तरह दिखता है:

बदलना(डोरी, नमूना, प्रतिस्थापन, झंडे)

डोरी उस स्ट्रिंग का प्रतिनिधित्व करता है जिसे आप खोजना और बदलना चाहते हैं। नमूना खोजने के लिए स्ट्रिंग है. नमूना यह एक रेगुलर एक्सप्रेशन भी हो सकता है, लेकिन यह आमतौर पर एक स्ट्रिंग है। एक सफल मैच के बाद, लेस सीएसएस कंपाइलर उसे बदल देता है नमूना साथ प्रतिस्थापन.

वैकल्पिक रूप से, बदलना() फ़ंक्शन में यह भी शामिल हो सकता है झंडे रेगुलर एक्सप्रेशन फ़्लैग के लिए पैरामीटर.

@डोरी: "नमस्ते";
@नमूना: "एलो";
@प्रतिस्थापन: "मैं";
डिव::पहले{
संतुष्ट: बदलना(@डोरी,@नमूना,@प्रतिस्थापन)
}

संकलन के बाद उपरोक्त कोड ब्लॉक का परिणाम निम्नलिखित होना चाहिए:

डिव::पहले {
संतुष्ट: "नमस्ते";
}

कम सीएसएस में कार्यों की सूची बनाएं

कम सीएसएस में, आप मानों की सूची को परिभाषित करने के लिए अल्पविराम या रिक्त स्थान का उपयोग करते हैं। उदाहरण के लिए:

@किराने का सामान: "रोटी", "केला", "आलू", "दूध";

आप इसका उपयोग कर सकते हैं लंबाई() सूची में तत्वों की संख्या का मूल्यांकन करने के लिए फ़ंक्शन।

@परिणाम: लंबाई (@किराने का सामान);

आप भी उपयोग कर सकते हैं निकालना() किसी विशेष स्थिति पर मान निकालने का कार्य। उदाहरण के लिए, यदि आप तीसरा तत्व प्राप्त करना चाहते हैं किराने का सामान सूची, आप निम्न कार्य करें:

@तीसरा-तत्व: निकालें (@किराने का सामान, 3);

नियमित प्रोग्रामिंग भाषाओं के विपरीत जहां सूची सूचकांक 0 से शुरू होता है, कम सीएसएस में सूची का प्रारंभ सूचकांक हमेशा 1 होता है।

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

डिव {
 मार्जिन: रेंज (10px, 40px, 10);
}

उपरोक्त कोड ब्लॉक को निम्नलिखित में संकलित करना चाहिए:

डिव {
 मार्जिन: 10px 20px 30px 40px;
}

जैसा कि आप देख सकते हैं, कम सीएसएस कंपाइलर 10px से शुरू होता है, पिछले मान को 10 तक बढ़ाता है, जब तक कि यह अंतिम स्थिति (40px) तक नहीं पहुंच जाता।

कम सीएसएस फ़ंक्शंस के साथ एक सरल वेबसाइट बनाना

अब समय आ गया है कि आपने जो कुछ भी सीखा है उसे एक साथ लाएं और कम सीएसएस के साथ एक सरल प्रोजेक्ट बनाएं। एक फ़ोल्डर बनाएं और जोड़ें Index.htm और शैली.रहित फ़ाइलें.

खोलें Index.htm फ़ाइल करें और निम्नलिखित HTML कोड जोड़ें।

एचटीएमएल>
<एचटीएमएललैंग="एन">
<सिर>
<मेटाcharset="यूटीएफ-8">
<मेटानाम="व्यूपोर्ट"संतुष्ट="चौड़ाई=डिवाइस-चौड़ाई, प्रारंभिक-पैमाना=1.0">
<जोड़नारिले="स्टाइलशीट/कम"प्रकार="पाठ/सीएसएस"href="style.less" />
<शीर्षक>दस्तावेज़शीर्षक>
सिर>
<शरीर>
<डिवकक्षा="कंटेनर">
<एच 1>
एच 1>
डिव>
<लिखी हुई कहानीस्रोत=" https://cdn.jsdelivr.net/npm/less" >लिखी हुई कहानी>
शरीर>
एचटीएमएल>

उपरोक्त कोड ब्लॉक में, एक अभिभावक है "कंटेनर"डिव एक खाली के साथ एच 1 तत्व। स्रोत पर विशेषता लिखी हुई कहानी टैग कम सीएसएस कंपाइलर के पथ को इंगित करता है।

इस के बिना लिखी हुई कहानी टैग, ब्राउज़र आपके कोड को समझ नहीं पाएगा। वैकल्पिक रूप से, आप अपने कंप्यूटर पर कम सीएसएस स्थापित कर सकते हैं नोड पैकेज मैनेजर (एनपीएम), टर्मिनल में निम्नलिखित कमांड चलाकर:

एनपीएम इंस्टॉल -जी कम

जब भी आप संकलन करने के लिए तैयार हों ।कम फ़ाइल, बस नीचे दिए गए कमांड को चलाएँ, यह सुनिश्चित करते हुए कि आपने वह फ़ाइल निर्दिष्ट की है जिसमें कंपाइलर को आउटपुट लिखना चाहिए।

कम शैली.कम शैली.सीएसएस

में शैली.रहित फ़ाइल, दो वेरिएबल बनाएँ अर्थात्: कंटेनर-चौड़ाई और कंटेनर-बीजी-रंग की चौड़ाई और पृष्ठभूमि रंग का प्रतिनिधित्व करने के लिए "कंटेनर"डिव क्रमश।

@कंटेनर-चौड़ाई: 50रेम;
@कंटेनर-बीजी-रंग: पीला;

इसके बाद, तीन वेरिएबल बनाएं: डोरी, नमूना, और प्रतिस्थापन. फिर इसके लिए शैलियाँ जोड़ें "कंटेनर"डिव और यह एच 1 तत्व।

@डोरी: "पृथ्वी ग्रह के बच्चों की ओर से नमस्कार!";
@नमूना: "पृथ्वी ग्रह के बच्चे!";
@प्रतिस्थापन: "प्लूटो के निवासी!";
.कंटेनर{
चौड़ाई: @कंटेनर-चौड़ाई;
पृष्ठभूमि का रंग: @कंटेनर-बीजी-रंग;
गद्दी: अगर(@कंटेनर-चौड़ाई > 30रेम, श्रेणी(20px, 80px, 20),"");
सीमा: ठोस;
}
एच 1:पहला बच्चा::बाद{
संतुष्ट: बदलना(@डोरी,@नमूना,@प्रतिस्थापन);
}

उपरोक्त कोड ब्लॉक में, श्रेणी() फ़ंक्शन सेट करता है गद्दी संपत्ति पर "कंटेनर"डिव. कम संकलक को संकलित करना चाहिए शैली.रहित निम्नलिखित में फ़ाइल करें:

.कंटेनर {
चौड़ाई: 50रेम;
पृष्ठभूमि का रंग: पीला;
गद्दी: 20पिक्सल 40पिक्सल 60पिक्सल 80पिक्सल;
सीमा: ठोस;
}
एच 1:पहला बच्चा::बाद {
संतुष्ट: "नमस्तेसेनिवासियोंकाप्लूटो!";
}

जब आप खोलते हैं Index.htm ब्राउज़र में फ़ाइल, आपको यही देखना चाहिए:

सीएसएस प्रीप्रोसेसरों के साथ अपनी उत्पादकता में सुधार करें

नियमित प्रोग्रामिंग भाषाओं में, फ़ंक्शन आपको लिखने के लिए आवश्यक कोड की मात्रा को कम करते हैं और त्रुटियों को कम करते हैं। लेस जैसे सीएसएस प्रीप्रोसेसर कई सुविधाएँ प्रदान करते हैं जो सीएसएस कोड लिखना आसान बनाते हैं।

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