Advertisement
  1. Web Design
  2. Sass
Webdesign

पांच क्विक (तेज़) चरणों में Sass (सैस) को देखें और संकलन करें

by
Difficulty:IntermediateLength:ShortLanguages:

Hindi (हिंदी) translation by Satyam Sh. (you can also view the original English article)

Final product image
What You'll Be Creating

सैस (Sass) शायद सीएसएस (CSS) प्री-प्रोसेसर में सबसे लोकप्रिय है; सालों तक हमें साफ, पुन: उपयोग करने योग्य और मॉड्यूलर सीएसएस (CSS) लिखने में मदद मिली है। इस त्वरित (क्विक) ट्यूटोरियल में मैं सीधे बिंदु (पॉइन्ट) पर आता हूँ और समझाऊँगा कि कमांड लाइन का उपयोग करके सैस (Sass) को सीएसएस (CSS) में कैसे संकलित (कम्पाइल) करना है। 

1. Node.js इन्स्टॉल करें

कमांड लाइन के माध्यम से सैस (Sass) को संकलित करने के लिए, पहले हमें node.js. को स्थापित (इन्स्टॉल) करना होगा। इसे आधिकारिक वेबसाइट nodejs.org से डाउनलोड करें, पैकेज खोलें और इन्स्टलेशन विज़ार्ड का पालन करें। 

2. एनपीएम (NPM) आरंभ करें 

एनपीएम (NPM) जावास्क्रिप्ट के लिए नोड पैकेज प्रबंधक है। एनपीएम (NPM) तीसरे पक्ष के पैकेजों को इन्स्टॉल और अनइंस्टॉल करना आसान बनाता है। एनपीएम के साथ एक सैस (Sass) परियोजना को प्रारंभ करने के लिए, अपने टर्मिनल और सीडी (CD) (डरेक्टरी बदलें) को अपने प्रोजेक्ट फ़ोल्डर में खोलें। 

Navigating to SASS-tutorial folder
सैस (Sass) प्रोजेक्ट फ़ोल्डर में नेविगेट करना 

एक बार सही फ़ोल्डर में, कमांड  npm init चलाएं। आपको प्रोजेक्ट के बारे में कई प्रश्नों का उत्तर देने के लिए प्रेरित किया जाएगा, जिसके बाद एनपीएम (NPM) आपके फ़ोल्डर में एक package.json फाइल उत्पन्न करेगा। 

packagejson

3. नोड-सैस (Node-Sass) इन्स्टॉल करें

नोड-सैस (Node-Sass) एक एनपीएम पैकेज है जो सैस (Sass) को सीएसएस (CSS) के लिए तैयार करता है (जो इसे बहुत तेज़ भी करता है)। नोड-सैस (Node-Sass) को स्थापित करने के लिए अपने टर्मिनल में निम्न कमांड चलाएं: npm install node-sass 

4. नोड-सैस (Node-Sass) कमांड लिखें

सैस (Sass) को संकलित करने के लिए सब कुछ एक छोटी सी लिपि (स्क्रिप्ट) लिखने के लिए तैयार है। कोड एडिटर में package.json फ़ाइल खोलें। आप ऐसा कुछ देखेंगे:

स्क्रिप्ट (scripts) सेक्शन में परीक्षण (test) आदेश के तहत एक scss कमांड जोड़ें, जैसा कि नीचे दिखाया गया है: 

चलिए इस पूरी रेखा से शब्द दर शब्द गुज़रते हैं।

  1. node-sass : नोड-सैस (Node-Sass) पैकेज को संदर्भित करता है।
  2. -watch : एक वैकल्पिक ध्वज जिसका मतलब है "scss/ फ़ोल्डर में सभी .scss फ़ाइलों को देखें और जब भी कोई परिवर्तन होता है, तब उन्हें हर बार पुनः कंपाइल करें।" 
  3. scss : फ़ोल्डर का नाम जहां हमने अपनी सभी .scss फाइलें रखी है।
  4. -o css: हमारे संकलित (कम्पाइल्ड) सीएसएस (CSS) के लिए आउटपुट फ़ोल्डर।

जब हम इस स्क्रिप्ट को चलाते हैं तो यह scss/ फ़ोल्डर में प्रत्येक .scss फ़ाइल देखेगा, फिर जब भी हम एक .scss फ़ाइल बदलते हैं तो css/ फ़ोल्डर में संकलित सीएसएस (CSS) को सहेजेगा। 

5. स्क्रिप्ट चलाएं

हमारी एक-लाइन स्क्रिप्ट को एक्सक्यूट (संचालन करना) करने के लिए, हमें टर्मिनल में निम्न कमांड चलाने की जरूरत है: npm run scss

और वो रहा! हम सैस (Sass) को देख और संकलन कर रहे हैं। 

सैस (Sass) क्विक टिप 

अधिक सैस (Sass) क्विक सलाह के लिए देखते रहें; आप सबके लिए एक पूरा संग्रह है! 

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.