पोस्ट और पूर्व प्रसंस्करण सीएसएस

नमस्कार पाठक। लेआउट सीखने के अपने तरीके पर, क्या आपने सीएसएस सीखा है और आगे बढ़ना चाहते हैं? फिर आप बिल्ली के नीचे। सावधानी, बहुत कोड।

इस लेख में, मैं प्रीप्रोसेसरों और पोस्टप्रोसेसर (ओं?) की समीक्षा करूंगा।

मैं CSS के बारे में विवरण में नहीं जाऊंगा, जिसका अर्थ है कि आप पहले से ही जानते हैं। मैं बीईएम संकेतन में कक्षाओं का नाम दूंगा। इसके अलावा, मैं उन सभी चीज़ों की स्थापना और विन्यास में तल्लीन नहीं करूंगा जिनके बारे में मैं लिखूंगा, लेकिन फिर भी मैं उन लिंक्स को छोड़ दूंगा जिनका आप अनुसरण कर सकते हैं और सीख सकते हैं कि यह कैसे करना है।

चलो प्रीप्रोसेसरों से शुरू करते हैं।

preprocessors

सीएसएस के संदर्भ में एक पूर्वप्रक्रमक क्या है? विक्की जवाब जानता है।

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

प्रीप्रोसेसर क्या हैं? कई प्रतिनिधि हैं, उदाहरण के लिए: Sass (.sass, .scss), कम ( .less ) और स्टाइलिस (.stylus)।
प्रीप्रोसेसरों के अलावा, PostCSS (या इसके सुगरएसएस पार्सर और PreCSS प्लगइन) को अलग से प्रतिष्ठित किया जा सकता है। आगे देखते हुए, मैं कहूँगा कि हाँ, PostCSS केवल पोस्ट-प्रोसेसर नहीं है।

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

संभावनाएं

चर

//style.scss $color: #fff; span { color: $color; background: $color; } //style.css span { color: #fff; background: #fff; } 

चरों की उपयोगिता अति कठिन है। अब आप रंगों को सार्थक नाम दे सकते हैं ($ टमाटर: आरजीबी (255,99,71)), स्थिरांक के माध्यम से मूल्यों की गणना न करें, बल्कि चर (ऊंचाई: $ body_height - $ footer_height) और बहुत कुछ के माध्यम से। कई तर्क दे सकते हैं कि सीएसएस में चर हैं। लेकिन कैन आई यूज़ कहता है कि आईई के लिए कोई समर्थन नहीं है (और स्पष्ट कारणों के लिए, यह अपेक्षित नहीं है)।

घोंसला करने की क्रिया

 //style.scss .chat-area { width: 40%; &__button { // & -    (   & = .chat-area) display: inline-block; height:36px; width: 10px; } a { color: red; } } //style.css .chat-area { width: 40%; } .chat-area__button { display: inline-block; height:36px; width: 10px; } .chat-area a { color: red; } 

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

hagfish

 //style.scss @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } //style.css .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } 

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

अतिरिक्त कार्य

 //style.scss $color: #202020; h1, h2 { color: lighten($color, 40%); } //style.css h1, h2 { color: #868686; } 

मूल रूप से, नई विशेषताएं रंग के साथ काम करना आसान बनाती हैं। उदाहरण के लिए, हल्का कार्य - निर्दिष्ट संख्या के अनुसार रंग को हल्का करता है (विपरीत गहरा है)।

समस्याओं का समाधान किया

प्रतिरूपकता

मानक आयात के साथ समस्या यह है कि यह सर्वर के लिए एक अतिरिक्त अनुरोध बनाता है, जो एक महंगा ऑपरेशन है। यह अच्छा होगा यदि आयात तुरंत आयातित फ़ाइल के सभी पाठ को स्रोत फ़ाइल में डाला जाए, है ना?

एक रास्ता या कोई अन्य, पहले से कोई प्रीप्रोसेसर नहीं थे, और समस्या को किसी तरह हल करना पड़ा। उदाहरण के लिए, आप एक फ़ाइल में सभी कोड लिख सकते हैं।


हालांकि, हमारे पास प्रीप्रोसेसर हैं और वे हमारे लिए इस समस्या को हल करेंगे। प्रीप्रोसेसर मानक आयात को ओवरराइड करता है और अब सर्वर के लिए पूछने के बजाय, यह स्रोत फ़ाइल में आयात सम्मिलित करता है, जैसा कि मैं चाहता था।

 //style.scss @import "selector1"; @import "selector2"; //selector1.scss span { color: white; } //selector2.scss div { color: gold; } //style.css div { color: gold; } span { color: white; } 

कृपया ध्यान दें कि स्रोत फ़ाइलों को एक में बदल दिया गया था। एक स्टेटिक्स के लिए सर्वर से अनुरोध - एक जवाब।

विरासत

<कटाक्ष> हमारे पास कक्षाएं हैं, लेकिन कोई विरासत नहीं है, ऐसा कैसे? </ व्यंग्य>। अब तथाकथित "टेम्पलेट चयनकर्ताओं" का चयन करना और अन्य चयनकर्ताओं के साथ उनका विस्तार करना संभव है।

 // style.scss %equal-heights { //   height: 100%; } %message { //   padding: 10px; } .success { @extend %message; color: green; } .error { @extend %message; color: red; } // style.css .success, .error { padding: 10px; } .success { color: green; } .error { color: red; } 

टेम्पलेट चयनकर्ताओं की सुंदरता यह है कि वे उत्पन्न शैलियों में फिट नहीं होते हैं। टेम्पलेट तुल्यकारक% समान-ऊंचाइयों कोड में शामिल नहीं था और सीएसएस में कोई निशान नहीं छोड़ा। चयनकर्ता% संदेश को विस्तार करने वाले चयनकर्ताओं के लिए नियमों के रूप में परिलक्षित किया गया था। आप सामान्य चयनकर्ताओं से विरासत में प्राप्त कर सकते हैं, लेकिन टेम्पलेट चयनकर्ताओं का उपयोग करना बेहतर होता है ताकि कोई अतिरिक्त कचरा न हो।

स्वरूपण

कोड लिखे जाने के बाद, इसे फ़ॉर्मेट किया जाना चाहिए (उत्पादन के लिए संपीड़ित)। आप इसे वेबपैक जैसे कलेक्टरों की मदद से कर सकते हैं, या आप मानक टूल के माध्यम से कर सकते हैं।

सास में 4 प्रकार के प्रारूपण हैं।

 //expanded span { color: gold; display: block; } div { color: red; } //nested span { color: gold; display: block; } div { color: red; } //compact span { color: gold; display: block; } div { color: red; } //compressed span{color:gold;display:block}div{color:red} 

विस्तारित - मानव-लिखित कोड के समान।
नेस्टेड - पुराने सिंटैक्स के प्रारूप के लिए अनुमानित। पठनीयता खो नहीं है, लेकिन यह एक हॉलीवुड मुद्दा है।
कॉम्पैक्ट - फिर भी पठनीयता बनाए रखता है, लेकिन कठिनाई के साथ। एक परियोजना में चयनकर्ताओं की संख्या को आंखों से निर्धारित करने के लिए उपयोगी है।
संकुचित - पहले से ही पूरी तरह से अपठनीय प्रारूप। हटाए जा सकने वाले सभी वर्ण हटा दिए जाते हैं। ब्राउज़र को खिलाने के लिए उपयुक्त है।

उपसंहार

मुझे सैस द्वारा जोड़ी गई कुछ विशेषताओं को समझ में नहीं आया। उदाहरण के लिए, अंकगणित संचालकों के छोरों या विशेषताएं । मैं खुद को परिचित करने के लिए उन्हें छोड़ दूंगा।

postprocessors

प्रीप्रोसेसरों से निपटने के बाद, हम पोस्टप्रोसेसरों की ओर बढ़ते हैं।

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

मैं पोस्टसीएसएस के संचालन के एक ठोस उदाहरण पर समझाऊंगा - सीएसएस के संदर्भ में पोस्टप्रोसेसरों का एकमात्र प्रतिनिधि।

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

पोस्टसीएसएस के पूरे चक्र को निम्नानुसार वर्णित किया जा सकता है:

• स्रोत फ़ाइल को PostCSS इनपुट और पार्स किया गया है।
• प्लगइन 1 कुछ करता है
• ...
• प्लगइन एन कुछ करता है
• परिणाम स्ट्रिंग में परिवर्तित हो जाता है और आउटपुट फ़ाइल में लिखा जाता है।

PostCSS पारिस्थितिकी तंत्र में मौजूद मुख्य प्लग इन पर विचार करें

प्लग-इन

Autoprefixer

यह प्लगइन इतना लोकप्रिय है कि बहुत से लोग सोचते हैं कि वे इस प्लगइन का उपयोग करते हैं लेकिन PostCSS का उपयोग नहीं करते हैं। वे गलत हैं।

 //in.css div { display: flex } //out.css div { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex } 

ऑटोप्रिफ़शर आपके नियमों में ब्राउज़र उपसर्ग जोड़ता है। सबसे महत्वपूर्ण प्लगइन्स में से एक, जिसने पोस्टसीएसएस के इतिहास को बिना बदली के शुरू किया। आप यहां तक ​​कह सकते हैं कि इस प्लगइन की खातिर ही PostCss को रखना समझ में आता है।

पूर्व निर्धारित इं

 //in.css @custom-media --med (width <= 50rem); @media (--med) { a:hover { color: color-mod(black alpha(54%)); } } //out.css @media (max-width: 50rem) { a:hover { color: rgba(0, 0, 0, 0.54); } } 

पोस्टसीएसएस प्रीसेट एनवी में वे विशेषताएं हैं जो केवल सीएसएस डेवलपर्स के ड्राफ्ट ड्राफ्ट में चर्चा की जाती हैं। इस उदाहरण में, @ कस्टम-मीडिया निर्देश लागू किया गया था, साथ ही रंग-मॉड फ़ंक्शन भी। आज भविष्य के सीएसएस का उपयोग करना शुरू करें!

सीएसएस मॉड्यूल

ये सभी BEM आपके लिए नहीं हैं, लेकिन क्या अभी भी वर्ग के नाम की समस्या है? तब PostCSS एक अलग समाधान प्रदान करता है।

 //in.css .name { color: gray; } //out.css .Logo__name__SVK0g { color: gray; } 

CSS मॉड्यूल एक निश्चित पैटर्न (सब कुछ अनुकूलन योग्य है) के अनुसार वर्ग के नाम बदलता है। अब हम पहले से ही कक्षा के नाम को नहीं जानते हैं, क्योंकि यह गतिशील रूप से निर्धारित किया जाता है। अगर हम उन्हें पहले से नहीं जानते हैं तो तत्वों को कैसे वर्गीकृत किया जाए? PostCSS, Webpack और ES6 को मिलाकर मैं इस समाधान की पेशकश कर सकता हूं:

 import './style.css'; //  import styles from './style.css'; //  

अब हम न केवल शैलियों के साथ एक फ़ाइल आयात कर रहे हैं (उदाहरण के लिए, घटक की प्रतिक्रिया फ़ाइल में) और उन मानों को प्रतिस्थापित करना जो हम पहले जानते हैं, लेकिन किसी वस्तु का आयात करना। इस ऑब्जेक्ट की कुंजी मूल चयनकर्ता होंगे, और मान परिवर्तित हो जाएंगे। अर्थात्, इस उदाहरण में, शैलियाँ ['नाम'] = 'Logo__name__SVK0g'।

कम

 //in.css .icon { size: 48px; } .canvas { color: #abccfc #212231; } //out.css .icon { width: 48px; height: 48px; } .canvas { color: #abccfc; background-color: #212231; } 

PostCSS शॉर्ट विभिन्न नियमों के लिए छोटी प्रविष्टियों का एक गुच्छा जोड़ता है। कोड छोटा हो रहा है, और इसलिए त्रुटियों के लिए जगह कम है। साथ ही पठनीयता बढ़ती है।

ऑटो रीसेट

 //in.css div { margin: 10px; } a { color: blue; } //out.css div, a { all: initial; } div { margin: 10px; } a { color: blue; } 

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

 //out.css div, a { margin: 0; padding: 0; } div { margin: 10px; } a { color: blue; } 

लेख की शुरुआत में याद रखें कि मैंने कहा था कि पोस्टसीएसएस केवल एक पोस्ट प्रोसेसर नहीं है?

PostCSS - प्रीप्रोसेसर?

एक पार्सर और एक प्लगइन पर विचार करें, जिसके बाद आप PostCSS के बारे में अपनी वर्तमान राय बदल देंगे।

SugarSS

 //in.sss .parent color: white .parent > .child color: black //out.css .parent { color: white } .parent > .child { color: black } 

सुगरएसएस एक पार्सर है (प्लगइन नहीं!), जो इंडेंटेशन पर आधारित है, और मानक के रूप में घुंघराले ब्रेसिज़ पर नहीं। इसका एक अलग एक्सटेंशन ".sss" है। सुगरएसएस का उपयोग करते हुए लिखा गया कोड पुराने सैस सिंटैक्स की शैली के समान है, लेकिन इसके लोशन जैसे कि चर, मिश्रण, विरासत, आदि।

आपने अनुमान लगाया कि अगला प्लगइन क्या जोड़ेगा?

PreCSS

 //in.sss $color: black .parent .child color: $color //  SugarSS $color: black; .parent { .child { color: $color } } //out.css .parent .child { color: black } 

PreCSS सिर्फ उन पूर्वप्रकारों की बहुत क्षमताओं को जोड़ता है जिनके बारे में लेख के पहले भाग में लिखा गया है।

और अब PostCSS एक प्रीप्रोसेसर क्यों नहीं है?

Stylelint

काफी पहले ही स्टाइललिंट के बारे में लिखा जा चुका है। वह इस समीक्षा में आ गया क्योंकि वह सीएसएससी फाइलों की लाइनों के पार्सर के रूप में पोस्टसीएसएस का उपयोग करता है। मान लीजिए हमारे पास ऐसी फाइल है।

 a { color: rgb(1, 1, 1) } div { color: rgb(0, 0, 0) } 

वर्तमान फ़ाइल के लिए इसका आउटपुट है:

  2:21 Expected a trailing semicolon declaration-block-trailing-semicolon 6:21 Expected a trailing semicolon declaration-block-trailing-semicolon 7:1 Unexpected missing end-of-source newline no-missing-end-of-source-newline 

इस उपकरण की उपयोगिता overestimate करने के लिए काफी मुश्किल है।

निष्कर्ष

Preprocessors बहुत सी नई कार्यक्षमता जोड़ते हैं जो CSS में नहीं है। एक बार जब आप इसे आज़माते हैं, तो आप शायद ही नियमित सीएसएस पर लौटेंगे।

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

प्रीप्रोसेसर और पोस्टसीएसएस के संयोजन में कोई भी परेशान नहीं करता है। विकल्प उन परियोजनाओं के लिए बहुत अच्छा है जो पहले से ही प्रीप्रोसेसरों का उपयोग करते हैं और एक जीवित स्थान रखते हैं।

नई परियोजनाओं के लिए, मैं केवल PostCSS का उपयोग करने की सलाह दूंगा। लेआउट डिजाइनरों को प्रीप्रोसेसर सिंटैक्स के लिए उपयोग किया जाता है? PreCSS प्लगइन और SugarSS पार्सर स्थापित करें। क्रॉस-ब्राउज़र संगतता की आवश्यकता है? Autoprefixer प्लगइन स्थापित करें। क्रॉस-ब्राउज़र संगतता की अब आवश्यकता नहीं है (उदाहरण के लिए, आपकी परियोजना एक इलेक्ट्रॉन में लपेटी गई थी और यह डेस्कटॉप बन गई थी)? बस Autoprefixer की स्थापना रद्द करें! पोस्टसीएसएस के साथ, आप कर सकते हैं, जैसा कि निर्माता के साथ होता है, ठीक उसी तरह से जो आपकी परियोजना की जरूरत है।