10 विस्मयकारी PostCSS प्लगइन्स आप एक सीएसएस विज़ार्ड बनाने के लिए

PostCSS एक अविश्वसनीय रूप से बहुमुखी उपकरण है जो इसे संभव बनाता है जावास्क्रिप्ट प्लगइन्स के साथ सीएसएस शैलियों को बदलना. इसका लचीलापन इसके निर्माण के तरीके में निहित है.

PostCSS का मुख्य भाग एक Node.js मॉड्यूल है जिसे आप npm के साथ स्थापित कर सकते हैं, और इसमें 200 से अधिक प्लगइन्स का एक पारिस्थितिकी तंत्र है जिसे आप अपनी परियोजना में उपयोग कर सकते हैं।.

PostCSS न तो प्रीप्रोसेसर है, न ही पोस्टप्रोसेसर, क्योंकि अलग-अलग PostCSS प्लग इन श्रेणियों में या दोनों में गिर सकते हैं; यह पूरी तरह आप पर निर्भर करता है कि आप क्या बनाते हैं। PostCSS के साथ, आप एक अलग वाक्यविन्यास सीखने की जरूरत नहीं है जैसे Sass या LESS के मामले में; आप तुरंत इसका उपयोग शुरू कर सकते हैं.

PostCSS आपकी मौजूदा CSS फ़ाइल को लेता है और इसे जावास्क्रिप्ट-पढ़ने योग्य डेटा में बदल देता है, फिर JavaScript प्लगइन्स संशोधन करते हैं, और PostCSS मूल फ़ाइल का परिवर्तित संस्करण लौटाता है। अच्छा लगता है, है ना?

इस पोस्ट में हम 10 PostCSS प्लगइन्स पर एक नज़र डालेंगे आपको कुछ महान चीजों में एक अंतर्दृष्टि दे सकते हैं जिन्हें आप प्राप्त कर सकते हैं इस भयानक उपकरण के साथ.

1. ऑटोप्रिफ़र

Autoprefixer संभवत: सबसे प्रसिद्ध PostCss प्लगइन है, क्योंकि इसका उपयोग Google, Twitter और Shopify जैसी उल्लेखनीय तकनीकी कंपनियों द्वारा किया जाता है। यह विक्रेता के उपसर्गों को CSS नियमों में जोड़ता है जहाँ यह आवश्यक है.

Autoprefixer Can I Use के डेटा का उपयोग करता है। इस तरह यह दिनांकित नहीं होता है, और हमेशा सबसे हाल के नियमों को लागू कर सकता है। आप यह देख सकते हैं कि यह अपने इंटरैक्टिव डेमो साइट पर कैसे काम करता है.

2. CSSnext

CSSnext एक सीएसएस ट्रांसपिलर है आपको वर्तमान साइटों पर भविष्य के CSS सिंटैक्स का उपयोग करने की अनुमति देता है. W3C में कई नए CSS नियम हैं जो वर्तमान में ब्राउज़रों द्वारा लागू नहीं किए गए हैं, लेकिन डेवलपर्स को अधिक परिष्कृत CSS को तेज और आसान लिखने में सक्षम कर सकते हैं। इस अंतर को पाटने के लिए CSSnext बनाया गया है.

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

3. प्री सीएसएस

PreCSS PstCSS प्लगइन्स में से एक है जो सीएसएस प्रीप्रोसेसर की तरह काम करता है। यह संभव बनाता है अपनी sytlesheet फ़ाइलों में Sass- जैसे मार्कअप का लाभ उठाएं.

अपने वर्कफ़्लो में PreCSS शुरू करके आप चर का उपयोग कर सकते हैं, यदि नहीं तो बयान, के लिये छोरों, मिश्रण, @extend तथा @आयात आपके सीएसएस कोड में नियम, घोंसले के शिकार और कई अन्य उपयोगी सुविधाएँ। PreCSS का गितुब प्रलेखन आपको विस्तृत निर्देश देता है कि इसे कैसे बनाया जाए.

4. स्टाइललिंट

StyleLint एक आधुनिक CSS लाइनर है सबूत और आपके सीएसएस कोड को मान्य करता है. यह त्रुटियों से बचने के लिए आसान बनाता है और आपको लगातार कोडिंग सम्मेलनों का पालन करने के लिए धक्का देता है.

StyleLint नवीनतम CSS सिंटैक्स को समझता है, इसलिए इसका उपयोग पहले बताए गए PreCSS प्लगइन के साथ किया जा सकता है। यह आपको अपनी स्वयं की कॉन्फ़िगरेशन बनाने की अनुमति भी देता है, और यह भी जांचता है कि क्या आपकी सेटिंग्स वैध हैं.

5. पोस्टसीएसएस एसेट्स

PostCSS एसेट्स प्लगइन एक काम है आपकी CSS फाइलों के लिए एसेट मैनेजर. यदि आप URL पथों से परेशान हैं, तो यह एक बढ़िया विकल्प हो सकता है, क्योंकि PostCSS Assets आपकी स्टाइलशीट फ़ाइलों को पर्यावरणीय परिवर्तनों से अलग करती है.

आपको लोड पथ, सापेक्ष पथ और एक आधार पथ को परिभाषित करने की आवश्यकता है, और प्लगइन स्वचालित रूप से आपके द्वारा आवश्यक संपत्ति को देखेगा। उदाहरण के लिए आप निम्न कोड लिख सकते हैं यदि आपको उचित URL की आवश्यकता है foobar.jpg छवि:

 शरीर पृष्ठभूमि: संकल्प ('foobar.jpg'); 

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

6. CSSNano

यदि आपको किसी उत्पादन साइट के लिए अनुकूलित और न्यूनतम सीएसएस फ़ाइलों की आवश्यकता है, तो यह देखने लायक है CSSNano. यह एक मॉड्यूलर प्लगइन है जिसमें कई छोटे, एकल-जिम्मेदारी वाले PostCSS प्लगइन्स होते हैं। यह व्हाट्सएप को हटाने जैसी बुनियादी खनन तकनीक का प्रदर्शन नहीं करता है, बल्कि इसमें उन्नत विकल्प भी हैं जो केंद्रित अनुकूलन को संभव बनाते हैं.

कई अन्य विशेषताओं में, CSSNano, z- इंडेक्स मानों को पुन: प्राप्त करने, कस्टम पहचानकर्ताओं को कम करने, लंबाई, समय और रंग मूल्यों को परिवर्तित करने और पुराने विक्रेता उपसर्गों को हटाने में सक्षम है।.

7. फ़ॉन्ट जादूगर

यदि आप परिष्कृत टाइपोग्राफी के प्रशंसक हैं, तो आप निश्चित रूप से पसंद करेंगे फ़ॉन्ट जादूगर PostCSS प्लगइन। फ़ॉन्ट जादूगर का जादू इसकी क्षमता में निर्भर करता है स्वचालित रूप से सभी आवश्यक उत्पादन @फॉन्ट फ़ेस नियम.

यह कैसे काम करता है बहुत सीधा है, आपको केवल जोड़ने की आवश्यकता है फ़ॉन्ट-परिवार: "मेरा फेव फ़ॉन्ट"; एक HTML तत्व के लिए सीएसएस नियम, और फ़ॉन्ट जादूगर बाकी काम करता है। यह Google फ़ॉन्ट, फ़ॉन्ट की स्थानीय प्रति, बूटस्ट्रैप टाइपोग्राफी को जोड़ सकता है, और फ़ॉन्ट को अतुल्यकालिक रूप से लोड भी कर सकता है। यहां इसकी इंटरेक्टिव डेमो साइट है.

8. एसवीजी लिखें

क्या आपने कभी सोचा है कि SVG को अपनी CSS फाइलों में लिखना कितना सही होगा? एसवीजी पोस्टसीएसएस प्लगइन की सहायता से आप इस लक्ष्य को आसानी से प्राप्त कर सकते हैं.

उदाहरण के लिए, यह आसान प्लगइन, इसे संभव बनाता है अपनी एसवीजी पृष्ठभूमि और आइकन को अपनी सीएसएस फ़ाइल में संग्रहीत करें, और बादमें उन्हें संबंधित HTML तत्व में जोड़ें इस अनुसार:

 @ वर्ग वर्ग @ सही भरण: वर (- रंग, काला); चौड़ाई: 100%; ऊंचाई: 100%;  .example बैकग्राउंड: सफ़ेद svg (वर्ग परम - (रंग # 00b1ff)) कवर; 

9. खोया ग्रिड

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

लॉस्ट ग्रिड में बहुत सरल नियम होते हैं, उदाहरण के लिए 25% चौड़ाई वाले कॉलम को परिभाषित करना इस छोटे कोड स्निपेट से अधिक नहीं होता है:

 div खोया-स्तंभ: 1/4; 

10. पोस्टसीएसएस स्प्राइट्स

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

आप निर्धारित करने के लिए अलग-अलग फ़िल्टर और ग्रुपर्स का उपयोग कर सकते हैं कि आप कौन सी छवियों को स्प्राइट में डालना चाहते हैं, और आप आउटपुट इमेज के आयाम भी सेट कर सकते हैं.