Advertisement
  1. Code
  2. HTML & CSS

सास और क्रोम DevTools के साथ विकसित करना

by
Difficulty:BeginnerLength:MediumLanguages:

Hindi (हिंदी) translation by Redy Sediawan (you can also view the original English article)

इस लेख में हम इस बात पर ध्यान देंगे कि हम अपने Sass विकास वर्कफ़्लो में Chrome DevTools को कैसे बेहतर ढंग से एकीकृत कर सकते हैं।


ट्यूटोरियल चुपके तिरछी नज़र!

यहां इस बात की एक झलक दी गई है कि हम इस ट्यूटोरियल में एनिमेटेड GIF के माध्यम से क्या कर रहे हैं:

edit-sass

बाईं ओर एक टर्मिनल और उदात्त पाठ संपादक है, और दाईं ओर क्रोम है। Scss फ़ाइल में परिवर्तन डिस्क के लिए किया जा रहा है, जो उदात्त में परिलक्षित होता है, Sass घड़ी कमांड सीएसएस फ़ाइल का एक नया संस्करण उत्पन्न कर रही है जब वह Sass फ़ाइल में परिवर्तन का पता लगाता है, जो बदले में DevTools द्वारा उठाया गया है और परिलक्षित होता है पेज पर


एक बेहतर कार्यप्रवाह की आवश्यकता

तो क्या हम यहां हल करने की कोशिश कर रहे हैं? हम एक बेहतर कार्यप्रवाह क्यों चाहेंगे? खैर, चलो कुछ Sass डिबगिंग का एक उदाहरण की समीक्षा सीएसएस उत्पंन, निंनलिखित. scss फ़ाइल है, जो शामिल दिया:

और अब सीएसएस, जो ऊपर Sass फ़ाइल द्वारा उत्पंन होता है, इस तरह दिखेगा:

अब हम सिर्फ HTML का एक छोटा सा की जरूरत है हमारे स्टाइल लागू करने के लिए:

ठीक है, अब तक तो अच्छा है । अब हम डिजाइन और क्रोम DevTools का उपयोग कर अपने पृष्ठ के विकास शुरू करना चाहते हैं । पहले हम सही पर क्लिक करके बॉक्स के एक वर्ग के साथ div निरीक्षण और तत्व का चयन का निरीक्षण । तो फिर हम बाहर शैलियों फलक, जो रंग संपत्ति, फ़ाइल नाम के भीतर समाहित है पर एक नोट के लिए एक हरी मूल्य से पता चलता है की जांच कर सकते है लाइन संख्या है कि चयनकर्ता पर प्रकट होता है के साथ । अब यहां है जहां समस्या है-संसाधित सीएसएस का पालन नहीं, लाइन के लिए लाइन, क्या स्रोत. scss फ़ाइल की तरह लग रहा है, जो हमारे विकास कार्यप्रवाह पर एक नकारात्मक प्रभाव हो सकता है ।

sublime-source-vs-output

ऊपर की छवि में, बाएँ फलक एक स्रोत. scss फ़ाइल दिखाता है और दाईं ओर संसाधित संस्करण दिखाता है । (ध्यान दें मैं उदात्त पाठ में वाक्य रचना हाइलाइटिंग के लिए SCSS बंडल का उपयोग कर रहा हूं)

dev-tools-regular-view

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

वास्तव में, हम भी क्या इसी लाइन नंबर के एक स्पष्ट संकेत नहीं है, ज़ाहिर है, व्यावहारिक रूप से बोल रहा हूं, हमारे ऊपर उदाहरण बहुत आसान है और हम बहुत जल्दी समझ सकते है क्या लाइन क्या नक्शे, कोड को देखकर । हालांकि एक बड़ी. scss फ़ाइल में, चीजें trickier प्राप्त कर सकते हैं ।

sources-panel-regular

जैसा कि आप ऊपर देख सकते हैं, DevTools हमारे. scss फ़ाइल की कोई समझ नहीं है, हम एक DevTools और Sass कार्यप्रवाह, जो है क्या हम इस ट्यूटोरियल में देख रहा हूं का उपयोग करके इस लेकिन पता कर सकते हैं । संक्षेप में, DevTools में Sass समर्थन की कमी का अर्थ हो सकता है:

  • हम तुरंत लाइन नंबर एक चयनकर्ता और/या सीएसएस संपत्ति पर मौजूद नहीं पता है, हमारी स्रोत फ़ाइल के भीतर ।
  • फ़ाइल प्रणाली में हमारे सीएसएस परिवर्तन बने बहुत ज्यादा सवाल से बाहर है ।
  • यहां तक ​​कि केवल स्रोत पैनल में .scss फ़ाइल को देखना मुश्किल है क्योंकि DevTools एक्सटेंशन को एक के रूप में नहीं पहचानता है जिसे देखा जाना चाहिए।

सैस समर्थन की तैयारी

क्रोम

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

अब चलिए नेविगेट करते हैं: ऑम्निबॉक्स में झंडे, फिर डेवलपर टूल प्रयोग सक्षम करें, इसे सक्षम करें और Chrome को पुनरारंभ करें।

chrome-flags

नीचे दी गई छवि एक प्रयोग पैनल से पता चलता है, आप DevTools के नीचे दाएं कोने पर दांतेदार पहिया पर क्लिक करके और ' प्रयोग ' पर क्लिक करके इस तक पहुंच सकते हैं, तो Sass के लिए समर्थन के लिए बॉक्स की जांच करें ।

dev-tools-experiments

बंद करने और DevTools खोलने के बाद, आप अब सेटिंग्स विंडो के बाएं साइडबार में सामांय मेनू आइटम के लिए जा सकते है और स्रोत अनुभाग में नेविगेट, वहां से, जांच ' सक्षम स्रोत maps ' और ' ऑटो Sass पर पुनः लोड सीएसएस बचाओ ' । टाइमआउट डिफ़ॉल्ट मान पर छोड़ा जा सकता है ।

sass-support-dev-tools

सास

इस ट्यूटोरियल Sass के नवीनतम संस्करण का उपयोग करता है (इस लेखन के वर्तमान समय में 3.3.0) के रूप में वहां स्रोत नक्शे के लिए कुछ प्रारंभिक समर्थन है । यहां आप Rubygems का उपयोग कर Sass कैसे स्थापित कर सकते हैं:

sass-gem

अब हम Sass बताने की जरूरत है हमारे. scss फ़ाइलें संकलन, निंनलिखित कमांड का प्रयोग:

ऊपर से, शैलियों. scss अपने स्रोत फ़ाइल और शैलियों है. css संसाधित फ़ाइल है, जो आपके HTML पृष्ठ का उपयोग होता है । यहां है कैसे आप संसाधित. css फ़ाइल में लिंक होगा:

यदि आप अपने टर्मिनल में नीचे की छवि के समान कुछ देखते हैं:

sass-command-line

और आप एक उत्पन्न. map फ़ाइल देखते हैं, तो, बधाई: Sass डिबगिंग काम कर रहा है! यहां है क्या उन अंय आदेश विकल्प पिछले संकलन आदेश से कर रहे हैं:

  • --watch: स्रोत. scss फ़ाइल में परिवर्तन के लिए घड़ी और जैसे ही यह एक परिवर्तन का पता चला है यह संकलन होगा ।
  • --scss: हम उपयोग कर रहे हैं Sass की क्या शैली प्रदर्शित करेगा.
  • --sourcemap: इसी स्रोत नक्शा फ़ाइलें उत्पन्न होगा ।

अब, स्रोत नक्शे की समझ होने के साथ पालन करने के लिए महत्वपूर्ण नहीं है, लेकिन यह निश्चित रूप से कुछ के बारे में पढ़ने लायक है के रूप में यह विकास की प्रक्रिया में मदद करना है । स्रोत मानचित्र पर कुछ संसाधनों के लिए नीचे देखें:

  • परिचय HTML5Rocks पर जावास्क्रिप्ट स्रोत मैप्स के लिए
  • स्रोत मैप्स: भाषाएं, उपकरण और Github पर अंय जानकारी
  • स्रोत मानचित्र १०१ पर Nettuts

तत्वों से स्रोतों के लिए

elem-to-source

सब कुछ ठीक हो गया, अपने पृष्ठ खोलने जहां Sass समर्थन DevTools में सक्षम है Sass debugging के लिए अनुमति चाहिए । ध्यान देने वाली पहली बात यह है कि फ़ाइल नाम इसी .scss स्रोत फ़ाइल को दिखाएगा, जो उपयोगी है, इसके अलावा, लाइन नंबर हमारे स्रोत फ़ाइल में लाइन नंबर को सही ढंग से दर्शाता है।

elements-sass

फ़ाइल नाम पर क्लिक करने से आप प्रश्न हाइलाइट किए गए चयनकर्ता के अनुरूप लाइन के साथ स्रोत पैनल पर सही ले जाएंगे।

नोट: अब आपके पास सिंटैक्स हाइलाइटिंग के साथ आपके ब्राउज़र में देखने योग्य Sass फ़ाइल है!

sources-panel-sass

ठीक है, इसलिए तत्व पैनल से संबंधित सीएसएस चयनकर्ता शांत है, लेकिन सीएसएस गुणों के बारे में क्या?

नीचे स्क्रीनशॉट में, सूत्रों का पैनल सीएसएस संपत्ति मैं में रुचि थी, वहां पाने के लिए मैं आदेश-तत्वों पैनल के भीतर से संपत्ति पर क्लिक किया था पर प्रकाश डाला गया है । तथ्य यह है कि यह मुझे लाइन में ले लिया है, जहां मूल्य परिभाषित किया गया था (बजाय लाइन: संपत्ति: $value;) बहुत शक्तिशाली है!

sources-property-sass

नोट: तत्वों पैनल में संपत्ति पर क्लिक कमांड से स्रोत पैनल में एक सीएसएस संपत्ति के लिए नेविगेट Sass के लिए विशिष्ट नहीं है, यह भी नियमित रूप से सीएसएस के साथ प्राप्त किया जा सकता है ।


निर्बाध परिवर्तनों के साथ Sass संपादन

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

sources-save-as-sass

क्योंकि हम ' की जांच की ऑटो पर पुनः लोड सीएसएस Sass ' सहेजें और क्योंकि Sass घड़ी ध्वज के साथ टर्मिनल में चल रहा है, परिवर्तन बहुत जल्दी कर रहे है और DevTools हमें उन परिवर्तनों को दिखाने में सक्षम हैं ।

यहां तक कि mixins काम के रूप में की उंमीद है, निंनलिखित चिपकाने, एक लगभग खाली. scss सही सीएसएस में स्रोत पैनल परिणाम के भीतर फ़ाइल में उत्पंन किया जा रहा है, जो DevTools से पुनः लोड करने में सक्षम है एक दूसरे के भीतर ।

mixin-sources

जैसा कि आप ऊपर की छवि में देख सकते हैं, बाएं हाथ की ओर है. scss स्रोत फ़ाइल है, जो है कि हम क्या परिवर्तन करना होगा, दाहिने हाथ की ओर से पता चलता है उत्पंन. css फ़ाइल जो DevTools से परिवर्तन उठाया दिखाता है (लगभग तुरंत धंयवाद टर्मिनल में देखो झंडा को )


Sass धाराप्रवाह Conf पर डिबगिंग

पॉल आयरिश धाराप्रवाह जो क्रोम DevTools पर रसदार जानकारी के बहुत सारे था पर एक महान बात दे दी है, लेकिन यह भी Sass का उपयोग करें । Sass जानकारी के लिए 5:30 के लिए आगे छोड़ें ।


सारांश

चलो इस ट्यूटोरियल में चर्चा की मुख्य बिंदुओं में से कुछ पर चलते हैं:

  • क्रोम DevTools में Sass क्षमताओं को देखने और Sass संसाधनों को संशोधित करने के लिए एक शानदार तरीका है, हालांकि यह दोनों के बारे में: झंडे और सेटिंग्स पैनल में सक्षम करने के लिए मत भूलना ।
  • एक परियोजना में Sass और क्रोम DevTools का उपयोग करते समय, आप स्रोत फ़ाइल को देखने/संपादित करने के बजाय उत्पंन फ़ाइल के साथ एक अधिक कुशल कार्यप्रवाह है की संभावना है ।
  • तत्वों पैनल में सीएसएस गुण कमांड क्लिक किया जा सकता है, चयनकर्ता के अधिकार के लिए प्रदर्शित फ़ाइल नाम भी क्लिक करने वाला है । दोनों आप स्रोत पैनल में प्रासंगिक भाग के लिए ले जाएगा ।
  • . scss फ़ाइल पर एक ' के रूप में सहेजें ' कर सूत्रों पैनल के संपादन क्षमताओं का उपयोग, भविष्य बचाता है (आदेश + s) फ़ाइल अधिलेखित करना चाहिए ।
  • क्रोम कैनरी और Sass 3.3.0 के नवीनतम संस्करण (स्रोत नक्शे के कारण) इस ट्यूटोरियल में इस्तेमाल किया गया, उन्हें बाहर की कोशिश करने के लिए सुनिश्चित हो!

दिलचस्प लिंक

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

इस लेख को पढ़ने के लिए धन्यवाद!

जैसे आपने क्या सीखा है? Chrome DevTools के बारे में और जानें!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.