CSS को प्रबंधित करना मुश्किल हो सकता है, विशेष रूप से किसी भी उचित आकार की साइट के लिए। इस प्रीप्रोसेसर की मदद लें।
मान लीजिए कि आप वास्तव में एक बढ़िया CSS सुविधा के बारे में सीखते हैं, जैसे नेस्टिंग। लेकिन जब आप आगे बढ़ते हैं और इसे आजमाते हैं, तो आप महसूस करते हैं कि समर्थन भयानक है, और अंतत: इसका उपयोग करने में वर्षों लग जाएंगे। पोस्टसीएसएस जैसे प्रीप्रोसेसरों की शुरूआत तक सीएसएस में यह एक बड़ी समस्या हुआ करती थी।
जानें कि कैसे PostCSS आपको आज विकास के दौरान आधुनिक और भविष्य के CSS का उपयोग करने की अनुमति देता है। आपको पता चलेगा कि PostCSS वास्तव में क्या है, आप इसका उपयोग कैसे कर सकते हैं, और इसकी सुविधाओं का लाभ उठाने का सबसे अच्छा तरीका है।
परियोजना की स्थापना
एक खाली फ़ोल्डर में नेविगेट करें, index.html नाम की एक फ़ाइल बनाएँ, और फ़ाइल में निम्न HTML मार्कअप जोड़ें:
एचटीएमएल>
<एचटीएमएललैंग="एन"><सिर>
<जोड़नासंबंधित="शैली पत्रक"href="src/styles.css">
सिर><शरीर>
<पी>अनुच्छेदपी>
<डिव>डिवडिव>
शरीर>
एचटीएमएल>
यह HTML दस्तावेज़ एक पैराग्राफ और प्रस्तुत करता है तत्व। यह नाम की स्टाइल शीट फ़ाइल भी आयात करता है
Styles.css वह अंदर है स्रोत फ़ोल्डर। में फाइल बनाएं स्रोत फ़ोल्डर और निम्नलिखित सीएसएस शैली नियम शामिल करें:शरीरपी {
रंग: नारंगी;
}शरीरडिव {
रंग: नीला;
}
शरीर {
दिखाना: जाल;
}
यह सीएसएस पृष्ठ पर दोनों तत्वों के रंग को स्टाइल करता है और एक ग्रिड लेआउट बनाता है। अधिकांश ब्राउज़र इस तरह सामान्य CSS सिंटैक्स का समर्थन करते हैं। लेकिन जब आपकी दृष्टि नए सिंटैक्स पर होगी, तो आपको PostCSS लाना होगा।
Node.js प्रोजेक्ट बनाना और PostCSS इंस्टॉल करना
सरल शब्दों में, PostCSS आपको आधुनिक CSS को ऐसी चीज़ में बदलने की अनुमति देता है जिसे अधिकांश ब्राउज़र समझ सकें; एक प्रक्रिया जिसे आमतौर पर ट्रांसप्लिंग के रूप में जाना जाता है। यदि आप अपने कोड में नए, प्रयोगात्मक, या गैर-मानक CSS गुणों को आज़माना चाहते हैं तो यह एकदम सही है, जो प्रमुख ब्राउज़रों का समर्थन नहीं कर सकते हैं।
पोस्टसीएसएस जावास्क्रिप्ट प्लगइन्स का एक समृद्ध पारिस्थितिकी तंत्र भी प्रदान करता है जिसे आप कुछ सुविधाओं को सक्षम करने के लिए स्थापित कर सकते हैं, जैसे कि सीएसएस मिनिफिकेशन, कलर सपोर्ट और लाइनिंग सपोर्ट।
PostCSS का उपयोग करने के लिए, सबसे पहले आपको एक नया Node.js प्रोजेक्ट इनिशियलाइज़ करना होगा:
एनपीएम init -yयह आदेश एक package.json फ़ाइल जनरेट करेगा जिसमें आपके ऐप के लिए डिफ़ॉल्ट मान होंगे।
अगला, PostCSS और PostCSS CLI दोनों को स्थापित करें। दूसरा पैकेज आपको कमांड लाइन से PostCSS चलाने की अनुमति देता है:
एनपीएम आई --सेव-देव पोस्टसीएसएस पोस्टसीएसएस-क्ली--सेव-देव झंडा दोनों को स्थापित करता है एनपीएम पैकेज देव निर्भरता के रूप में; आप डेवलपमेंट के दौरान CSS कोड को प्रोसेस करने के लिए केवल PostCSS और उसके प्लगइन्स का उपयोग करने जा रहे हैं।
के माध्यम से PostCSS का उपयोग शुरू करने के लिए कमांड लाइन इंटरफेस, अपने में जाओ पैकेज.जेसन फ़ाइल और सरल बनाएँ निर्माण: सीएसएस PostCSS के साथ ट्रांसप्लिंग के लिए कमांड:
"स्क्रिप्ट्स": {
"निर्माण: सीएसएस": "postcss src/styles.css --dir dest -w"
}यह आदेश आपके नंगे सीएसएस (में संग्रहीत) ले जाएगा src/styles.css), कोड को ट्रॅनपाइल करें, और फिर इसे इसमें आउटपुट करें गंतव्य फ़ोल्डर। चला रहा है एनपीएम बिल्ड: css कमांड इस फोल्डर को बनाता है और इसे इसके साथ पॉप्युलेट करता है Styles.css ब्राउज़र-पठनीय कोड वाली फ़ाइल।
जब आप अपने CSS को HTML में आयात कर रहे हों, तो सुनिश्चित करें कि आप उस गंतव्य फ़ोल्डर से आयात करते हैं जहाँ आप अपने CSS को संकलित कर रहे हैं, न कि उस स्रोत फ़ोल्डर से जिसे PostCSS संकलित करता है। यह, हमारे मामले में, है जिला फ़ोल्डर, नहीं स्रोत फ़ोल्डर।
यदि आप किसी ब्राउज़र में अपनी वेबसाइट खोलते हैं, तो आप देखेंगे कि साइट अभी भी CSS तक पहुंचती है। जब भी आप स्रोत फ़ाइल में परिवर्तन करते हैं, PostCSS कोड को फिर से संकलित करेगा और परिवर्तन वेब पेज पर दिखाई देंगे।
पोस्टसीएसएस प्लगइन्स का उपयोग करना
सैकड़ों हैं पोस्टसीएसएस प्लगइन्स PostCSS में उपसर्ग, लाइनिंग, नया सिंटैक्स समर्थन और दर्जनों अन्य सुविधाएँ जोड़ने के लिए। पोस्टसीएसएस प्लगइन स्थापित करने के बाद, आप इसे अंदर सक्रिय करते हैं postcss.config.js फ़ाइल — एक JavaScript फ़ाइल जिसका उपयोग आप PostCSS के लिए सभी कॉन्फ़िगरेशन सेट अप करने के लिए कर सकते हैं।
स्थापित करें cssnano निम्नलिखित आदेश के साथ PostCSS प्लगइन:
npm i --save-dev cssnanoएक बार फिर, आपको केवल इन निर्भरताओं को देव निर्भरताओं के रूप में सहेजने की आवश्यकता है। कारण यह है कि ये सब तब होता है जब आप विकास कर रहे होते हैं। साइट को उत्पादन में धकेलने के बाद आपको PostCSS या इसके किसी भी प्लगइन्स की आवश्यकता नहीं है।
नए इंस्टॉल किए गए cssnano प्लगइन का उपयोग करने के लिए, आपको निम्नलिखित कोड को अंदर जोड़ना होगा postcss.config.js फ़ाइल:
कॉन्स्ट सीसनैनो = ज़रूरत होना("सीएसएसनैनो")
मापांकनिर्यात = {
प्लगइन्स: [
सीएसएसनैनो({
पूर्व निर्धारित: 'चूक'
})
]
}
अब यदि आप टर्मिनल पर वापस जाते हैं और बिल्ड कमांड को फिर से चलाते हैं, तो यह आउटपुट CSS को छोटा कर देगा (यानी कोड को मानवीय रूप से जितना संभव हो उतना छोटा बना देगा)। इसलिए जब आप किसी प्रोडक्शन-रेडी साइट पर पुश करते हैं, तो यह आपके CSS को यथासंभव छोटा बना देगा।
नेस्टिंग जैसी आधुनिक सुविधाओं का उपयोग करना
मान लीजिए कि आप अपनी स्टाइलशीट में नेस्टिंग सिंटैक्स का उपयोग करना चाहते हैं, तो आप पैराग्राफ ब्लॉक को बदल दें src/styles.css इस के साथ:
शरीर {
& पी {
रंग: नारंगी;
}
}यह कोड आपके स्टार्टर कोड के संस्करण जैसा ही है। लेकिन यह एक एरर देगा क्योंकि सिंटैक्स बहुत नया है, और अधिकांश वेब ब्राउज़र इसका समर्थन नहीं करते हैं। आप इस सिंटैक्स के लिए पोस्टसीएसएस के साथ समर्थन को स्थापित करके सक्षम कर सकते हैं postcss-preset-env लगाना।
प्लगइन किस चरण के आधार पर सीएसएस को संभालने के लिए विभिन्न प्लगइन्स का एक समूह संकलित करता है। स्टेज 0 उन सुपर प्रायोगिक सुविधाओं का प्रतिनिधित्व करता है जो शायद इसे CSS में भी नहीं ला सकती हैं। जबकि, चरण 4 उन भाषा सुविधाओं के लिए है जो पहले से ही CSS विनिर्देशन का हिस्सा हैं।
डिफ़ॉल्ट रूप से, वर्तमान-env चरण 2 सुविधाओं का उपयोग करता है (जो इसे CSS में बनाने की सबसे अधिक संभावना है)। लेकिन आप कॉन्फ़िगरेशन फ़ाइल में जो चाहें चरण को बदल सकते हैं।
प्लगइन स्थापित करने के लिए, निम्न कमांड चलाएँ:
npm i --save-dev postcss-preset-envफिर अपने में postcss.config.js फ़ाइल, आपको प्लगइन आयात करना है और इसे पंजीकृत करना है:
कॉन्स्ट सीसनैनो = ज़रूरत होना("सीएसएसनैनो")
कॉन्स्ट पोस्टसीएसएस प्रीसेटईएनवी = ज़रूरत होना("पोस्टसीएसएस-प्रीसेट-एनवी")
मापांकनिर्यात = {
प्लगइन्स: [
सीएसएसनैनो({
पूर्व निर्धारित: 'चूक'
}),
postcssPresetEnv({ अवस्था: 1})
]
}
आपको केवल उस नए CSS कोड के चरण को पास करना चाहिए जिसका आप उपयोग करना चाहते हैं। इस मामले में, हम मान रहे हैं कि नेस्टिंग सुविधा चरण 1 पर है। जब आप बिल्ड कमांड को फिर से चलाते हैं और ब्राउज़र की जांच करते हैं, तो आप देखेंगे कि यह नेस्टेड कोड को मानक CSS में संकलित करता है जिसे ब्राउज़र समझ सकता है।
चौखटे के साथ PostCSS का उपयोग करना
PostCSS को मैन्युअल रूप से कॉन्फ़िगर करना थोड़ा दर्द भरा हो सकता है। यही कारण है कि लगभग सभी आधुनिक फ्रेमवर्क बंडलिंग टूल्स (जैसे, वाइट, स्नोपैक और पार्सल) के साथ आते हैं, और इन टूल्स में पोस्टसीएसएस बिल्ट-इन के लिए सपोर्ट होगा। और अगर वे नहीं भी करते हैं, तो PostCSS समर्थन जोड़ने की प्रक्रिया अविश्वसनीय रूप से आसान है।
हमेशा याद रखें कि Vite और अधिकांश अन्य बंडलर उपयोग करते हैं ES6 मॉड्यूल सिस्टम, कॉमनजेएस नहीं। इसके आसपास जाने के लिए, आपको इसका उपयोग करने की आवश्यकता है आयात के स्थान पर कथन ज़रूरत होना() आप में postcssconfig.js फ़ाइल:
आयात cssnano से"सीएसएसनैनो"
// कॉन्फ़िगरेशन कोड यहां जाता है
जब तक आपके पास प्लगइन्स इंस्टॉल हैं, तब तक सब कुछ ठीक काम करेगा।
सास के बारे में अधिक जानें
PostCSS वर्तमान में उपलब्ध दर्जनों CSS प्रीप्रोसेसरों में से एक है। उनमें से एक एसएएसएस है, जो वाक्यगत रूप से भयानक स्टाइल शीट के लिए खड़ा है।
सीएसएस डेवलपर के रूप में एक और प्रमुख प्रीप्रोसेसर का उपयोग करना सीखना उपयोगी हो सकता है।