🐴 👨🏽‍🚒 🎭 प्रीप्रोसेसरों का उपयोग क्यों करें 📜 💬 🏢

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

कम या सस?

खैर, वास्तव में, यह हर किसी का व्यवसाय है। मुझे अपने धीमेपन के कारण सैस पसंद नहीं था - कम हमेशा तेजी से प्रदर्शन किया, परिणामस्वरूप, एक बिंदु पर मैंने कम पर स्विच करने का फैसला किया, लेकिन थोड़ी देर बाद यह पता चला कि मुझे इसकी शक्ति की कमी है! काश, मुझे यह नहीं पता था कि इस स्तर के एक प्रतिबंधात्मक मिश्रण को कैसे लागू किया जाए।
लेकिन सास का धीरज शोभा नहीं देता था, लेकिन उसी क्षण जब मैं सास के पास लौटना चाहता था, लेकिन संदेह से तंग था, मुझे लिबास द्वारा सलाह दी गई थी , और तब से मैं ग्रंट का उपयोग करता हूं - यह मेरे लिए केवल ग्रंट-एसएएस कनेक्ट करने के लिए पर्याप्त था (और अधिक कुछ नहीं, उदाहरण के लिए, रूबी और रत्न स्थापित करना)। मेरे लिए, चुनाव स्पष्ट था और तब से - केवल लिबास । Sass की शक्ति ही और गति C के साथ - और क्या चाहिए?
मैंने अभी तक किसी भी तरह स्टाइलस की कोशिश नहीं की है।

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

मैं कुछ भी नया नहीं कहूंगा, सबसे अधिक संभावना है, लेकिन मैं दिखाना चाहता हूं कि यह प्रीप्रोसेसरों का उपयोग करने के लायक क्यों है।

चर

चर कुछ महान हैं। मैं बदनाम हो गया "प्रीप्रोसेसरों को एक प्रोग्रामर द्वारा आविष्कार किया गया था, न कि एक लेआउट डिजाइनर", लेकिन चर कैसे अस्वीकार किए जा सकते हैं? एक सरल उदाहरण जो जीवन को बहुत सुविधाजनक बनाता है - चूंकि मैं, डिजाइनर सहित, सभी रंग, फ़ॉन्ट सेटिंग्स, आदि। परियोजना के लिए, मेरे लिए _variables.scss फ़ाइल में स्टोर करना पर्याप्त है

_variables.scss

$white: rgb(255, 255, 255); $lightgray: rgb(238, 238, 238); $gray: rgb(153, 153, 153); $asphalt: rgb(85, 85, 85); $black: rgb(17, 17, 17); $blue: rgb(85, 164, 242); $lightblue: rgb(91, 192, 222); $green: rgb(46, 204, 113); $orange: rgb(230, 126, 34); $magenta: rgb(228, 183, 240); $red: rgb(231, 76, 60); $bgBrand: linear-gradient(to left, rgba(26,214,253,1) 0%, rgba(85,164,242,0.72) 100%) no-repeat center center fixed; $bgBlueLight: linear-gradient(rgb(26, 214, 253) 0%, rgb(29, 98, 240) 100%) no-repeat center center fixed; $bgPinkViolet: linear-gradient(#EF4DB6 0%, #C643FC 100%) no-repeat center center fixed; $bgWhiteGray: linear-gradient(#F7F7F7 0%, #D7D7D7 100%) no-repeat center center fixed;

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

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

घोंसले के शिकार से बेहतर क्या हो सकता है: होवर,: के बाद, पहले :: मूल तत्व में nth-child?
एक सरल, बहुत सरल उदाहरण:

 a { color: $blue; &:hover { color: darken($blue, 10%); } }

इसमें मैं वेरिएबल्स, darken() इंटरनल फंक्शन और एक ही नेस्टिंग का उपयोग करता हूं। यह एक तिपहिया प्रतीत होता है, लेकिन लेआउट में ऐसी तिपहिया होती हैं। कई बार यह देखना अधिक सुविधाजनक होता है कि किसी विशेष ब्लॉक से संबंधित क्या है, यह देखना कि उसके अंदर क्या है, और क्या नहीं। और लेखन .my-super-class:hover हर बार अभी भी व्यर्थ है। बीईएम दृष्टिकोण के प्रस्तावक इस संभावना की सराहना करेंगे, लेकिन उनके पास वहां अपने उपकरण हैं।
मुझे बिना हेडर वाली तालिका बनाने की आवश्यकता थी (मैंने बूटस्ट्रैप का इस्तेमाल किया)।

उदाहरण

 .table-information { tr { th { height: 0; padding: 0; border: 0; } td { border-top: 0; border-bottom: 1px solid $lightgray; } &:last-child { td { border-bottom: 0; } } } }

मिश्रण, आयात, आदि

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

 @mixin responsive($media) { @if $media == sm { @media (min-width: 768px) { @content; } } @else if $media == md { @media (min-width: 992px) { @content; } } @else if $media == lg { @media (min-width: 1200px) { @content; } } @else if $media == xlg { @media (min-width: 1700px) { @content; } } }

यह काफी सरलता से उपयोग किया जाता है, जैसे @ मीडिया-क्वेरीज़: @include responsive(sm) { background-color: red } और यह, साथ में तत्वों के घोंसले के शिकार।

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

"मैं उत्पन्न कोड का पता नहीं लगा सकता।"

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

उदाहरण

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

brand: color साथ एक सरणी सूची brand: color
मिक्सिन , जहां सभी गुण संग्रहीत होते हैं
और एक फ़ंक्शन जो कक्षाएं उत्पन्न करता है

नतीजतन, 3 फाइलें हैं जिनमें मैंने सास सुविधाओं का एक छोटा लेकिन शक्तिशाली हिस्सा इस्तेमाल किया: चर, आयात, मिश्रण, आंतरिक कार्य जैसे प्रत्येक / @ के लिए। अंतिम सीएसएस 687 लाइनों पर निकला।
इस परियोजना में एक नया बटन जोड़ने के लिए, मेरे लिए _variables.scss में ब्रांड की एक पंक्ति सम्मिलित करना : रंग और ग्रंट grunt build चलाना, और मैन्युअल रूप से नई कक्षाएं न बनाना पर्याप्त है।

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

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