Back to Question Center
0

प्रभावी ढंग से सास में सावधानियां और त्रुटियों का प्रयोग कैसे करें            प्रभावी ढंग से संबंधित विषयों में चेतावनी और त्रुटियों का प्रयोग कैसे करें: CSSSassFrameworksAudio & Semalt

1 answers:
प्रभावी ढंग से सास में सावधानियां और त्रुटियों का प्रयोग कैसे करें

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

सास के माध्यम से हमारा अविश्वसनीय सफर धीरे-धीरे समाप्त हो रहा है, और अब तक आप बहुत अच्छा कर रहे हैं! परियोजना के आर्किटेक्चर को देखने से पहले एक तकनीकी शैक्षिक छोड़ा गया, और फिर आप अपने खुद के प्रोजेक्ट्स में Sass कोड लिखने के लिए पूरी तरह सुसज्जित होंगे।

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

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

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

चेतावनियाँ

जैसा कि कहा गया है, सास में चेतावनियों का उत्सर्जन करने की क्षमता नया नहीं है @ वार्न डायरेक्टिव के माध्यम से संदेश या किसी भी SassScript अभिव्यक्ति के मूल्य को मानक आउटपुट स्ट्रीम में प्रदर्शित करना संभव है।

चेतावनी का संकलन प्रोसेस पर कोई प्रभाव नहीं पड़ता; यह किसी भी तरह से पीछा या बदलने के लिए संकलन को रोकता नहीं है। इसका एकमात्र उद्देश्य कंसोल में एक संदेश प्रदर्शित करना है

सैमल्ट सास में चेतावनियों का उपयोग करने के लिए बहुत सारे कारण हैं यहां एक दंपति है, लेकिन आपको अपना खुद का पता लगाना है:

  • आश्चर्यजनक और कठिन-से-ट्रैक कीड़े
  • से बचने के लिए कोड के बारे में धारणा के उपयोगकर्ता को सूचित करते हुए
  • पुस्तकालय या ढांचे के भाग के रूप में एक पदावनत कार्य या मिक्सिन के बारे में सलाह देना

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

     @ वार्न 'उह ओह, कुछ अजीब लग रहा है ';    

एक नियमित सीएलआई क्लाइंट को मिमलाना, यह चेतावनी निम्नलिखित आउटपुट का उत्सर्जन करेगी:

     चेतावनी: उह-ओह, कुछ अजीब लग रहा है। 1 / उपयोगकर्ता / hgiraudel / jump-start-sass / चेतावनी के लाइन 1 पर एससीएसएस    

हे, यह अच्छा है, है ना? यद्यपि यह चेतावनी सहायक से बहुत दूर है यह कहता है कि कुछ अजीब लग रहा है लेकिन यह नहीं कहता कि, क्या, या अजीब दिखने से इसे रोकने के लिए क्या किया जा सकता है। Semaltेट इस बात पर चर्चा करता है कि हम चेतावनियों में आगे कैसे सुधार कर सकते हैं. कल्पना कीजिए कि हमारे पास एक सास कस्टम फ़ंक्शन है जो em इकाई में एक पिक्सेल मूल्य को परिवर्तित करने का प्रयास करता है:

     @ फ़ंक्शन px-to-em ($ value, $ base-font-size: 16px) {@ परत ($ मान / $ आधार-फ़ॉन्ट-आकार) * 1em;}// उपयोग फू {फ़ॉन्ट-आकार: px-to-em (42px); // 2. 625}    

सभी अच्छे अब, क्या होता है जब यूनिटलेस नंबर (जैसे) 42 - कार्य करने के लिए? शायद आप इसे अनुमान लगा चुके हैं, लेकिन जैसा कि यह काफी स्पष्ट नहीं है, मैं आपको जवाब दूंगा:

     2 - 75 vtc vape. 625 नाम / पीएक्स एक वैध सीएसएस मान नहीं है।     

ऐसा इसलिए होता है क्योंकि आप असंगत इकाइयों ( पीएक्स और एम ) के बीच गणना करने का प्रयास कर रहे हैं। हम इस मुद्दे को दरकिनार करने के लिए क्या कर सकते हैं, यूनिटलेस मान को पिक्सल में व्यक्त किया जा सकता है और इसे पहले परिवर्तित कर दिया जाता है:

     @ फ़ंक्शन px-to-em ($ value, $ base-font-size: 16px) {@ अगर यूनिट रहित ($ value) {@ वार 'मान मान दें # $ {$ value} `पिक्सेल में होना; इसे बदलने का प्रयास ';$ मान: $ मान * 1px;}@ परत ($ मान / $ आधार-फ़ॉन्ट-आकार) * 1em;}    

फ़ंक्शन पिक्सल में व्यक्त किए गए मान की अपेक्षा कर रहा है। हम अब भी इसे बिना किसी मूल्यहीन मूल्य के साथ काम कर सकते हैं; हालांकि, हम यह सुनिश्चित नहीं कर सकते कि यह अपेक्षित व्यवहार है हम केवल मान सकते हैं कि यह काफी अच्छा है।

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

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

     @ मिसिइन इनलाइन-ब्लॉक {प्रदर्शन: इनलाइन-ब्लॉक;@ वार्न '' इनलाइन-ब्लॉक 'मिक्सिन को नापसंद किया गया है और इसे अगले प्रमुख संस्करण रिलीज़ में हटा दिया जाएगा। ';}    

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

अंतर के बीच @ वार्न और @ डेबग

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

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

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

@ डेबग निर्देश वास्तव में हाथ में आ सकते हैं जब आप जानना चाहते हैं कि एक चर के अंदर क्या है, उदाहरण के लिए:

     @ डेबग $ बेस-फ़ॉन्ट-आकार;    

त्रुटियां

चेतावनियां और त्रुटियाँ सास में काफी समान रूप से व्यवहार करती हैं, इसलिए सीखने की त्रुटियां अब एक हवा होने जा रही हैं कि आप पूरी तरह से चेतावनियों के साथ परिचित हैं! एक त्रुटि और एक चेतावनी के बीच एकमात्र अंतर है- जैसा कि आप अनुमान लगा सकते हैं- त्रुटि संकलन प्रक्रिया को रोक देती है. पिछले खंड में, यह तब भी काम करता है जब दिए गए तर्क वास्तव में अपेक्षित नहीं थे, लेकिन हम ऐसा (और नहीं) हमेशा ऐसा कर सकते हैं। अधिकांश समय, यदि तर्क अमान्य हैं, तो बेहतर त्रुटि है कि स्टाइलशीट लेखक समस्या को ठीक कर सकता है।

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

चलो एक मिमल त्रुटि के साथ शुरू करते हैं:

     @ आतंक 'YOUUUUU! नहीं करेगा। उत्तीर्ण करना। ';    

आउटपुट इस पर निर्भर हो सकता है कि आप अपनी स्टाइलशीट कैसे संकलित करते हैं, क्योंकि कुछ टूल त्रुटियों को एक निश्चित तरीके से पकड़ और बढ़ाता है। मानक sass रूबी बाइनरी (मणि) का उपयोग करना, यहां बताया गया है कि:

     त्रुटि: यूयूयूयूयूयू! नहीं करेगा। उत्तीर्ण करना। / उपयोगकर्ता / hgiraudel / jump-start-sass / त्रुटि के लाइन 1 पर एससीएसएसबैक्रेस के लिए --trace का उपयोग करें     

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

एक वास्तविक व्यावहारिक उदाहरण को देखने के लिए समय। नक्शे में गहराई से मूल्यों तक पहुंचने में सहायता करने के लिए, एक छोटी सी फ़ंक्शन लिखकर शुरू करते हैं, नक्शा-गहरे-प्राप्त (।) :

     @ फ़ंक्शन मानचित्र-गहरा-मिल ($ नक्शा, $ कुंजियाँ . ) {@ $ $ कुंजी $ $ कुंजी {$ नक्शा: मानचित्र-प्राप्त करें ($ नक्शा, $ कुंजी);@if (प्रकार का (नक्शा) == 'नल') {@ रेटन नक्शा;}}@ रेटन नक्शा;}     

चलो इसे कस्टम त्रुटियों के साथ बढ़ाएं लेकिन सबसे पहले, निम्न नक्शे पर विचार करें और नक्शा-गहराई से प्राप्त करें कॉल करें:

     $ नक्शा: ('फू': ('बार': ('बाज़': 42)));$ मान: map-deep-get ($ नक्शा, 'foo', 'bar', 'baz', 'qux');     

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

     त्रुटि: 42 नक्शे के लिए मानचित्र नहीं है/ उपयोगकर्ता / hgiraudel / jump-start-sass / त्रुटि के लाइन 1 पर एससीएसएस    

सास मानचित्र-प्राप्त (।) पर 42 प्रदर्शन करने का प्रयास करता है और एक त्रुटि का कारण बनता है क्योंकि यह नहीं किया जा सकता है। जबकि त्रुटि संदेश सही है, यह बहुत उपयोगी नहीं है समस्या का कारण होने वाली कुंजी का नाम जानने के लिए क्या उपयोगी होगा हम वह कर सकते है!

हम पहले से ही जांच करते हैं कि क्या $ नक्शा है नल जल्दी वापसी करने के लिए ताकि एक संकलन त्रुटि से बचने के लिए यदि कोई कुंजी मौजूद नहीं है हम यह सुनिश्चित करने के लिए एक दूसरी जांच कर सकते हैं कि नक्शा वास्तव में एक नक्शा है, या हम एक अर्थपूर्ण त्रुटि डालते हैं:

     @ फ़ंक्शन मानचित्र-गहरा-मिल ($ नक्शा, $ कुंजियाँ . ) {@ $ $ कुंजी $ $ कुंजी {$ नक्शा: मानचित्र-प्राप्त करें ($ नक्शा, $ कुंजी);// यदि `$ map` में अगली कुंजी नहीं है, तो वापसी` नल 'करें@if प्रकार का ($ नक्शा) == 'नल' {@ रेटन नक्शा;}// यदि `$ नक्शा 'एक नक्शा नहीं है, तो त्रुटि फेंक दें@if प्रकार का ($ नक्शा)! = 'नक्शा' {@ आतंक कुंजी '' # {$ key} `एक मानचित्र से संबद्ध नहीं है, लेकिन एक # {प्रकार का ($ नक्शा)} (` # {$ map} `)। ';}}@ रेटन नक्शा;}    

यदि हम अपना पिछला स्निपेट फिर से चलाते हैं, तो यहां आउटपुट दिया जाता है:

     त्रुटि: कुंजी 'बज़' एक नक्शा से जुड़ी नहीं है, लेकिन एक संख्या (`42`) / उपयोगकर्ता / hgiraudel / jump-start-sass / त्रुटि के लाइन 1 पर एससीएसएस    

यह बहुत बेहतर है! हमारे मानचित्र और / या हमारे फ़ंक्शन कॉल को ठीक करने के लिए साम्बाल्ट अब आसान त्रुटि संदेश के लिए धन्यवाद. यह आमतौर पर कंसोल है, लेकिन यह एक स्टाइलशीट्स को संकलित करने के तरीके के आधार पर भिन्न हो सकता है

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

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

March 1, 2018