یہ گائیڈ ایک تیز Node.js SASS/SCSS پروجیکٹ کو ترتیب دینے کے مکمل طریقہ کار کی وضاحت کرے گا۔
فاسٹ Node.js Sass/SCSS پروجیکٹ کیسے ترتیب دیا جائے؟
SASS منتخب عنصر پر اسٹائل کرنے کے لیے خالص CSS خصوصیات کا استعمال کرتا ہے۔ یہ ریاضی اور متغیر خصوصیات کو شامل کرکے اصل CSS کو بااختیار بناتا ہے۔ یہ درجہ بندی میں DOM پر اسٹائلنگ کا اطلاق کرتا ہے۔ SASS کو Node.js کے ساتھ مربوط کرکے، ڈویلپر پروجیکٹ کو بہت آسانی سے اسٹائل کر سکتا ہے تاکہ اسے مزید دلکش اور پکسل پرفیکٹ بنایا جا سکے۔
آئیے SASS/SCSS کے ساتھ Node.js پروجیکٹ ترتیب دینے کے لیے درج ذیل اقدامات پر عمل کریں۔
مرحلہ 1: 'SASS' کو انسٹال کرنا
پہلے انسٹال کریں ' SASS 'عالمی سطح پر Node.js پروجیکٹ میں نوڈ پیکیج مینیجر کا استعمال کرتے ہوئے' این پی ایم 'اس حکم کے ذریعے:
npm install -g sass
آؤٹ پٹ سے پتہ چلتا ہے کہ ' ساس 'پیکیج انسٹال ہو گیا ہے:
مرحلہ 2: ڈائریکٹریز بنانا
اگلا، درج ذیل 'mkdir' کمانڈ کا استعمال کرتے ہوئے CSS اور SCSS دونوں فائلوں کے لیے علیحدہ ڈائریکٹریز بنائیں:
mkdir cssFiles
mkdir scss فائلیں۔
یہ دیکھا جا سکتا ہے کہ اوپر ' mkdir 'حکم نے پیدا کیا ہے' css فائلیں 'اور' scss فائلیں ڈائریکٹریز:
مرحلہ 3: SASS ماڈیول کو لنک کریں۔
اب، استعمال کریں ' ساس 'کی رہائش پذیر فائلوں میں کسی بھی ترمیم کے لئے دیکھنے کے لئے ماڈیول' scss فائلیں ' ڈائریکٹری. ترمیم کی صورت میں، یہ خود بخود سی ایس ایس فائلوں کو لنک کے اندر بنائے گا۔ css فائلیں ڈائرکٹری بنائیں اور سی ایس ایس فائل میں وہی ایس سی ایس ایس ڈیٹا داخل کریں۔
دیکھنے اور لنک کرنے کے لیے حکم پر عمل کیا جائے گا ساس 'ماڈیول مندرجہ ذیل ہے:
ساس --گھڑیا scss فائلیں : css فائلیںاب، saas scssFiles ڈائرکٹری میں ہر طرح کی ترمیم کو دیکھ رہا ہے۔
نوٹ: مندرجہ بالا کمانڈ کو سسٹم کمانڈ پرامپٹ پر عمل میں لایا جانا چاہیے کیونکہ یہ ٹولز ٹرمینلز جیسے ویژول اسٹوڈیو کوڈ پر کام نہیں کرے گا۔
مرحلہ 4: SCSS اور متعلقہ CSS فائلوں کی تخلیق
اس مرحلے میں، ایک خالی فائل کا نام ' scssStyle 'کے ساتھ' scss 'توسیع کے اندر بن جاتی ہے' scss فائلیں ڈائریکٹری:
اس کے بعد، نام کے ساتھ دو فائلیں ' scssStyle.css 'اور' scssStyle.css.map 'خود بخود بن جائیں' ساس 'ماڈیول کے اندر' css فائلیں ' ڈائریکٹری، جیسا کہ ذیل میں دکھایا گیا ہے:
مرحلہ 5: کوڈ داخل کرنا
آخر میں، اندر کچھ SCSS کوڈ درج کریں ' scssStyle.scss ' جیسا کہ نیچے دکھایا گیا ہے:
اب، سی ایس ایس فارمیٹ میں وہی کوڈ خود بخود 'کے اندر داخل ہو جاتا ہے۔ scssStyle.css فائل:
آئیے gif کی مدد سے مرحلہ 4 اور 5 کو بصری طور پر واضح کرتے ہیں:
اس گائیڈ نے Node.js SASS\SCSS پروجیکٹ بنانے کے اقدامات کی وضاحت کی ہے۔
نتیجہ
تیز رفتار Node.js SASS/SCSS پروجیکٹ کو ترتیب دینے کے لیے پہلے ماڈیول انسٹال کریں “ ساس 'ماڈیول، اور پھر دو ڈائریکٹریز بنائیں ایک کے لیے' SASS\SCSS 'فائل اور دوسرا' کے لیے سی ایس ایس ' فائلوں. اس کے بعد، بنائیں ' ساس 'ماڈیول' کے ذریعے نئی بنائی گئی ڈائریکٹریوں میں کسی بھی تبدیلی کو دیکھنے کے لیے sass - watch sass: css ' کمانڈ. اس کارروائی کے نتیجے میں 'SASS\SCSS' فائل اور دو 'CSS' فائلیں 'CSS' فولڈر میں خود بخود بن جاتی ہیں۔ اگر صارف 'SASS\SCSS' فائلوں میں ترمیم کرتا ہے، تو نئی تبدیلیاں خود بخود CSS فائلوں میں داخل ہو جائیں گی۔ اس گائیڈ نے Node.js SASS\SCSS پروجیکٹ کو ترتیب دینے کے مکمل طریقہ کار کی وضاحت کی ہے۔