क्रोम देव टूल्स में सैस सपोर्ट

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

ट्रेनिंग

हमेशा की तरह, क्रोम कैनरी का नवीनतम संस्करण स्थापित करें ताकि सब कुछ अपेक्षित रूप से काम करे। उसके बाद, क्रोम जादू पृष्ठ पर जाएं : // झंडे / # सक्षम- devtools- प्रयोग और " डेवलपर टूल प्रयोग " समर्थन सक्षम करें, अगर आपने पहले से ऐसा नहीं किया है। हम ब्राउज़र को पुनरारंभ करते हैं।

सेटिंग्स में -> प्रयोग, बॉक्स " सैस स्टाइलशीट डीबगिंग " की जांच करें। ब्राउज़र को फिर से शुरू करें।


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


ब्राउज़र को एक पल के लिए छोड़ दें और अपने पसंदीदा कंसोल पर जाएं। हमें सैस संस्करण 3.3.0 अल्फा को स्थापित करने की आवश्यकता होगी, क्योंकि यह इस संस्करण में था कि स्रोत मैप्स के लिए समर्थन जोड़ा गया था (या बुलगारे से रूसी में )। यह कमांड द्वारा किया जाता है:

gem install sass --pre 

यदि आपको शपथ लेना शुरू करना है कि आपको संस्करण 0.7.0 सुनने की आवश्यकता है, तो निम्नलिखित कमांड मदद करेगी:

 gem install listen -v 0.7.0 

Sass लॉन्च करें

हम प्रोजेक्ट की वर्किंग डाइरेक्टरी में जाते हैं और बदलावों के लिए फाइलों पर एक स्थिर नजर के साथ सैस चलाते हैं। --Sourcemap पैरामीटर पास करना सुनिश्चित करें। और वहां हम आवश्यक Sass और CSS फाइलें निर्दिष्ट करते हैं। उदाहरण के लिए:

 sass --watch --sourcemap main.scss:main.css 

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

कम के बारे में क्या?

और स्रोत मैप्स के लिए सामान्य समर्थन कम नहीं होता है, जब सभी "मैपिंग" एक अलग फ़ाइल में होते हैं, तो यह क्रोम के नवीनतम संस्करणों में काम नहीं करेगा। यदि किसी को कम के लिए एक मानचित्र फ़ाइल उत्पन्न करने का एक तरीका मिला, तो कृपया टिप्पणियों में साझा करें।

उपयोगी संकेत : Ctrl + किसी भी CSS प्रॉपर्टी के नाम पर क्लिक करने पर Sass फाइल ठीक उसी लाइन पर खुल जाएगी जिस पर यह प्रॉपर्टी घोषित की गई है।

निष्कर्ष

अपने सीएसएस अधिक Sassy बनाओ। एक अच्छा कोडिंग है!