आप अन्य सीएसएस प्रीप्रोसेसरों से अधिक परिचित हो सकते हैं, लेकिन इस दावेदार को नज़रअंदाज़ न करें।

जब वेब विकास की बात आती है, तो किसी एप्लिकेशन को स्टाइल करने का सबसे आम तरीका सीएसएस का उपयोग करना है। हालाँकि, CSS के साथ काम करना बोझिल हो सकता है क्योंकि इसे डीबग करना बेहद कठिन है।

स्टाइलस सीएसएस का उपयोग करना सीखें, और आपके पास सबसे लोकप्रिय सीएसएस प्रीप्रोसेसरों में से एक के साथ एक और विकल्प उपलब्ध होगा।

CSS प्रीप्रोसेसर क्या है?

सीएसएस प्रीप्रोसेसर उपयोगिताएँ हैं जो सीएसएस लिखना आसान बनाती हैं। वे अक्सर अपने स्वयं के कस्टम सिंटैक्स से कोड संकलित करते हैं सीएसएस वह प्रारूप जिसे ब्राउज़र समझ सकें।

उदाहरण के लिए, सैस जैसे सीएसएस प्रीप्रोसेसर, लूप, मिक्सिन, नेस्टेड चयनकर्ता और यदि/अन्यथा कथन जैसी विशेष सुविधाएँ प्रदान करते हैं। ये सुविधाएं आपके सीएसएस कोड को बनाए रखना आसान बनाती हैं, खासकर बड़ी टीमों में।

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

instagram viewer

स्टाइलस सीएसएस कैसे काम करता है

अपने स्थानीय परिवेश में स्टाइलस स्थापित करने के लिए, आपको Node.js और दोनों में से किसी एक की आवश्यकता होगी नोड पैकेज मैनेजर (एनपीएम) या आपकी मशीन पर स्थापित यार्न। निम्नलिखित टर्मिनल कमांड चलाएँ:

एनपीएम स्टाइलस स्थापित करें

या:

यार्न स्टाइलस जोड़ें

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

लेखनी.

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

स्टाइलस--सीएसएस स्टाइल.सीएसएस स्टाइल.स्टाइल

स्टाइलस सीएसएस में सिंटैक्स और पैरेंट चयनकर्ता

पारंपरिक सीएसएस में, आप ब्रेसिज़ के साथ एक स्टाइल ब्लॉक को परिभाषित करते हैं; इन पात्रों को शामिल करने में विफलता से शैलियाँ टूट जाएंगी। स्टाइलस सीएसएस में, ब्रेसिज़ का उपयोग वैकल्पिक है।

स्टाइलस पायथन-जैसे सिंटैक्स का समर्थन करता है, जिसका अर्थ है कि आप इसके बजाय इंडेंटेशन का उपयोग करके ब्लॉक को परिभाषित कर सकते हैं:

.कंटेनर
अंतर: 10पिक्सल

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

.कंटेनर {
अंतर: 10पिक्सल;
}

लेस जैसे सीएसएस प्रीप्रोसेसरों की तरह, आप पैरेंट चयनकर्ता को संदर्भित कर सकते हैं & चरित्र:

बटन
रंग: सफ़ेद;
 &:होवर
रंग: पीला;

जो संकलित करता है:

बटन {
रंग: #fff;
}
बटन:होवर {
रंग: #ff0;
}

स्टाइलस सीएसएस में वेरिएबल्स का उपयोग कैसे करें

लेस सीएसएस जैसे सीएसएस प्रीप्रोसेसर में, आप वेरिएबल्स को परिभाषित करते हैं @ चरित्र, जबकि पारंपरिक सीएसएस एक वेरिएबल को परिभाषित करने के लिए "--" का उपयोग करता है.

स्टाइलस में, चीज़ें थोड़ी अलग हैं: आपको किसी वेरिएबल को परिभाषित करने के लिए किसी विशेष प्रतीक की आवश्यकता नहीं है। इसके बजाय, केवल बराबर चिह्न का उपयोग करके वेरिएबल को परिभाषित करें (=) इसे किसी मान से बांधने के लिए:

बीजी-रंग = काला

अब आप वेरिएबल का उपयोग कर सकते हैं .शैली इस प्रकार फ़ाइल करें:

डिव
पृष्ठभूमि का रंग: बीजी-रंग

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

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

आप कोष्ठकों के साथ एक शून्य चर को परिभाषित कर सकते हैं। उदाहरण के लिए:

खाली-चर = ()

आप इसका उपयोग करके अन्य संपत्ति मूल्यों का संदर्भ दे सकते हैं @ प्रतीक। उदाहरण के लिए, यदि आप किसी डिव की ऊंचाई उसकी चौड़ाई की आधी निर्धारित करना चाहते हैं, तो आप निम्न कार्य कर सकते हैं:

तत्व-चौड़ाई = 563पिक्सल
डिव
चौड़ाई: तत्व-चौड़ाई
ऊंचाई: (तत्व-चौड़ाई / 2)

यह काम करेगा, लेकिन आप वेरिएबल को पूरी तरह से बनाने से भी बच सकते हैं और इसका संदर्भ दे सकते हैं चौड़ाई इसके बजाय संपत्ति का मूल्य:

डिव
चौड़ाई: 563पिक्सल
ऊंचाई: (@चौड़ाई / 2)

इस कोड ब्लॉक में, @ प्रतीक आपको वास्तविक को संदर्भित करने की अनुमति देता है चौड़ाई संपत्ति पर डिव. आपके द्वारा चुने गए दृष्टिकोण के बावजूद, जब आप संकलन करते हैं .शैली फ़ाइल, आपको निम्नलिखित सीएसएस मिलना चाहिए:

डिव {
चौड़ाई: 563पिक्सल;
ऊंचाई: 281.5px;
}

स्टाइलस सीएसएस में कार्य

आप ऐसे फ़ंक्शन बना सकते हैं जो स्टाइलस सीएसएस में मान लौटाते हैं। मान लीजिए आप सेट करना चाहते हैं पाठ संरेखित एक div की संपत्ति "केंद्र" के लिए यदि चौड़ाई 400px से अधिक है, या "बाएँ" यदि चौड़ाई 400px से कम है. आप एक फ़ंक्शन बना सकते हैं जो इस तर्क को संभालता है।

मध्य में संरेखित करें(एन)
अगर (एन > 400)
 'केंद्र'
अन्यअगर (एन < 200)
 'बाएं'
डिव {
चौड़ाई: 563पिक्सल
पाठ संरेखित: मध्य में संरेखित करें(@चौड़ाई)
ऊंचाई: (@चौड़ाई / 2)
}

यह कोड ब्लॉक कॉल करता है मध्य में संरेखित करें फ़ंक्शन, पास करना चौड़ाई संपत्ति का मूल्य इसके साथ संदर्भित करके @ प्रतीक। मध्य में संरेखित करें फ़ंक्शन जाँचता है कि क्या इसका पैरामीटर है, एन, 400 से अधिक है, और यदि यह है तो "केंद्र" लौटाता है। अगर एन 200 से कम है, फ़ंक्शन "बाएं" लौटाता है।

जब कंपाइलर चलता है, तो उसे निम्नलिखित आउटपुट उत्पन्न करना चाहिए:

डिव {
चौड़ाई: 563पिक्सल;
पाठ संरेखित: 'केंद्र';
ऊंचाई: 281.5px;
}

अधिकांश प्रोग्रामिंग भाषाओं में, फ़ंक्शन आपके द्वारा उन्हें प्रदान किए जाने वाले क्रम के आधार पर पैरामीटर निर्दिष्ट करते हैं। इससे गलत क्रम में पैरामीटर पास करने के परिणामस्वरूप गलतियाँ हो सकती हैं, जिसकी अधिक संभावना है कि आपको अधिक पैरामीटर पास करने होंगे।

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

घटाना(बी:30px, ए:10px)/*-20px*/

CSS प्रीप्रोसेसर का उपयोग कब करें

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

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