https://virgool.io/feed/@abolfazl-mahrani ابوالفضل ماهرانیم 21 سال، برنامه نویس وب از وقتی که خیلی بچه بودم عاشق تکنولوژی و برنامه نویسی بودم تا الان و تا ابد تجربه های جذابمو اینجا باهاتون به اشتراک میزارم امیدوارم بتونم مفید باشم براتون 😉 fa 2026-06-17 16:56:47 https://files.virgool.io/upload/users/1158604/avatar/DZGhAR.jpeg?height=120&width=120 https://virgool.io/@abolfazl-mahrani https://virgool.io/@abolfazl-mahrani/%D8%AC%D8%A7%D8%AF%D9%88-%DA%A9%D8%B1%D8%AF%D9%86-devtools-%DA%A9%D8%B1%D9%88%D9%85-%D8%A8%D9%87-%D9%88%D8%B3%DB%8C%D9%84%D9%87-sassscss-jjvm71uxxlvw sass in chromeسلام دوستان خوبم از اینکه مقاله های منو دنبال میکنید سپاسگزارم?عنوان مقاله ام رو از عمد، این متن عجیب غریبو نوشتم!!! چون که این روشی که میخام یادتون بدم روشیه که خودم ابداعش کردم، و گفتم باشما هم به اشتراک بگذارم شاید که نه حتما به کارتون میاد و میتونید کارهای تکراری و زمان‌برتون برای طراحی وب‌سایت رو تا حدی زیادی کاهش بدید."نتیجه این آموزش این است که شما میتونید با استفاده از sass استایل هاتون رو در devTools کروم بزنید تا به صورت رانتایم تبدیل به css شود و خروجی رو درهمان مرورگر مشاهده کنید."اول از داستان خودم شروع میکنم به گفتن، که اصن برای چی دنبال این روش رفتم، تا صریح تر کاربردش رو متوجه بشید:خب من تویه شرکتی کار میکردم که کارش اینجوری بود که سایت زده شده رو باید با css شبیه به نمونه میکردیم و ما برای هر وبسایت مجبور بودیم داخل inspector مرورگر، المان رو سلکت کنیم و استایل هارو بنویسیم کاری بود که به شدت وقت گیر و خسته کننده بود و قانونی هم بود که نباید سلکتور ها عمومی باشند یعنی اگر المان فرزند میخواست استایل بگیره برای تداخل نداشتن با بقیه بخش ها باید حتما از id پدر خود استفاده میکرد ?نکته: اصولی نیست در سلکتور ها id استفاده شود ولی اگه از سر ناچاری بود اشکالی ندارد. میدونستم با استفاده از زبان های preprocessor مثل sass میتونم اینکارو کنم ولی من میخاستم نتیجه رو همون موقع مشاهده کنم یعنی داخل همون مرورگر المان هارو سلکت کنم و استایل بدم و نتیجه رو ببینم ماجرا اصلی از اینجا شروع شد...من در این آموزش از sass یا همان scss استفاده میکنم شما میتونید با تغییر دادن ابزار کار از تکنولوژی های دیگه هم استفاده کنید. من فرض رو بر این گذاشتم که شما میدونید devTools چیه و چجوری باید بازش کنید، ولی خب میگم البته قصد جسارت به اساتید رو ندارم...در ویندوز میتونید با کلید ترکیبی ctrl+shift+i به پنجره devTools برید.قدم اول: مطمئن شوید که تیک source maps مانند تصویر پایین در تنظیمات devTools خورده است .سورس مپ قدم دوم: نصب sass(scss) و ابزار مناسب برای راحتی کاربرای نصب sass کافی است که شما دستور زیر را در ترمینال یا همان cmd وارد کنید.npm install -g sass برای اطمینان از نصب میتونید کد زیر رو پس از نصب در همان cmd وارد کنید.sass --versionنصب نرم افزار scout-app برای استفاده راحت تر از sass و مدیریت بهتر فایل پروژه است، میتونید این نرم افزار رایگان رو از این لینک دانلود کنید. نرم افزار scout-appقدم سوم: ساختار پوشه پروژهساختار پوشه پروژه باید به این صورت باشدprojectDirectoryName/scss/styleName.scssساختار پوشهنکته: حتما اسم فایل scss باید با فایلی که استایل های سایتتون قرار توش قرار داده بشه باید یکی باشه جلوتر خودتون دلیلش رو میفهمید...قدم چهارم Overrides chrome: خب در این مرحله باید پروژتون رو به عنوان پوشه Overrides اضافه کنید مانند تصویر زیرنکته: فراموش نشود پس از انتخاب پوشه در بالای پنجره مرورگر از شما اجازه دسترسی میخواهد که شما باید اجازه رو بدید تا فولدر اضافه شود.overrides پس از اضافه کردن پوشه دایرکتوری ساخته شده طبق روش بالاتر که گفتم، اکنون نوبت آن رسیده که از فایل استایل اصلی ساییتون که استایل های سایت از آنجا خوانده میشود یک override درست کنید با اینکار یک کپی از اون در پوشه اضافه شده ایجاد میشود که هر تغییری دهید میتونید کاملا رانتایم مشاهده کنید!!باز کردن پنجره devTools فشردن کلید ctrl + p برای سرچ کردن فایل استایل سایتپس از باز شدن فایل در سورس پنل روی آن راست کلیک کرده و در پنجره باز شده بر روی گزینه save for overrides کلیک کنید مانند تصویر زیرپس از اضافه شدن کافیست که شما به دایرکتوری اضافه شده تان بروید میبیند که تعدادی فایل به پوشه ای که ساخته اید اضافه شده در حقیقت از استایل اصلی شما در اون پوشه جهت override کپی گرفته شده است. و ما میخواهیم از این فایل به عنوان خروجی scss استفاده کنیم!مرحله پایانی scout-app: در این قسمت شما باید پوشه اضافه شده به overrides رو به داخل این نرم افزار ببرید پس از انجام اینکار نرم افزار به صورت اتوماتیک اگر طبق مراحل بالا رفته بودید فایل scss شما را به عنوان ورودی در نظر میگیرد فقط شما باید فولدری که فایل ساخته شده توسط کروم هست رو به عنوان خروجی بدهید با اینکار شما با scss استایل دهی میکنید به صورت رانتایم تبدیل به css شده و شما میتوانید خروجی رو مشاهده کنید. دوستان این نکته رو فراموش نکنید که برای اجرای صحیح حتما باید اسم فایل ورودی با فایلی که کروم ساخته برای شما یکی باشد.طبق مراحل و شماره گذاری عکس پیش برید من در عکس بالا این کار را بر روی سایت ویرگول انجام دادم برای آموزش. پس از انجام مراحل فوق بر روی علامت پلی بزنید، اکنون میتوانید کار را شروع کنید و به scss کد بزنید و آن رانتایم تبدیل به css کنید و خروجی رو مشاهده کنید.وارد پنجره devTools شوید و در فولدری که اضافه کردید وارد فایل scss بشید و کدتون رو بزنید و لذت ببرید?میتونید بعد از کد زدن ctrl + s رو بزنید تا تغییرات رو مشاهده کنید خوشحال میشم دوستان نظرتون رو درباره این مقاله واسم بنویسید، امیدوارم که لذت برده باشید از این آموزش اگر مشکلی داشتید در نظرات پاسخگوتون هستم. ابوالفضل ماهرانی ابوالفضل ماهرانی Sat, 05 Feb 2022 00:16:39 +0330 https://virgool.io/@abolfazl-mahrani/%D8%B7%D8%B1%DB%8C%D9%82-%D9%81%D8%B9%D8%A7%D9%84-%DA%A9%D8%B1%D8%AF%D9%86-%D9%85%DB%8C%D8%B2%D8%A8%D8%A7%D9%86%DB%8C-%D8%B4%D8%A8%DA%A9%D9%87-%D9%88%D8%A8-%D9%BE%DA%A9-webpack-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AE%D8%B1%D9%88%D8%AC%DB%8C-%DA%AF%D8%B1%D9%81%D8%AA%D9%86-uyvmrhxtxitj صرفا جهت مقدمه!!خب این اولین مقاله ی منه و من همیشه سعی کردم رو هر کاری که دست میگذارم، اونو به بهترین نحو یادش بگیرم! و الان تصمیم گرفتم آموخته هام رو با افراد علاقه مند این حوزه به اشتراک بگذارم امیدوارم که از این مقاله بهره کافی رو ببرید خب بریم سر اصل مطلب? اگه خیلی خلاصه بخوام بگم، ما میخواهیم با وب پک (webpack) که درحال توسعه هستیم خروجی کارهامون رو داخل موبایلمون چک کنیم یا به طور مثال با دیوایس هایی که به شبکمون وصل هستند خروجی رو ببینیم چند تا کار میتونیم انجام بدیم...من با فرض اینکه شما بلدید با وب پک کار کنید و میدونید کاربردش چیه این مقاله رو مینویسم.اگه هم این کلمه براتون آشنا نیست میتونید به لینک زیر که سایت رسمیش هست، مراجعه و دربارش مطالعه کنید. https://webpack.js.org/ خب مراحل کارو میگم و سرتونو درد نمیارمبا استفاده از cli command که موقع ساختن وب پک در فایل package.json هستبا استفاده از فایل کانفیگ وب پک(webpack.config)با استفاده از cli command به صورت پیش فرض وب پک واستون روی لوکال هاست اجرا میشهاگه بخوام مرحله اول رو توضیح بدم کدی که در فایل package.json خودم هست رو میزارم که بهتر متوجه شید&quotscripts&quot: { &quotdev&quot: &quotcross-env NODE_ENV=development webpack-dev-server --open --hot --host 0.0.0.0&quot, }ما اصلا کاری به قسمت ها و آپشن هایی که داده شده نداریم، تنها آپشنی که برای ما مهم است در این بحث اخرین آپشن --host 0.0.0.0این ای پی معتبری نیست ولی یه جور اگه بخوام تشبیهش کنم نماد سادست که هرچی ای پی فعال داریم تو شبکه رو برامون فعال میکنه (از 0 تا 255) اگه با این روش بری میتونی تو pc با آدرس localhost خروجی رو ببینی و تویه دیوایس به شبکه متصل با ای پی شبکت بعلاوه پورت 192.168.1.118:3000 اگر با این روش رفتید تو ادرس مرورگر مراقب باشید که عین همین ای پی رو وارد نکنید چون با صفحه ی خالی سفید مواجه میشید?(میدونم شما دارک دوست دارید شایدم صفحه ی سیاهه خالی )روش دیگه ای که میتونید برید اینه که ای پی که به شبکه وصلید رو پیدا کنید که توی تنظیمات شبکه به راحتی میشه پیداش کرد، یه چیزی شبیه به این 192.168.1.180 اگه این عدد رو بزارید به جای صفر ها میزبانی وب پک روی این ip فعال میشه، ولی به نظرم روش اول بهتره چون روی تمام ip های فعال اجرا میشه (مثل لوکال هاست و شبکه ) فقط فراموش نکنید که اگه ip رو اشتباه وارد کنید با ارور مواجه میشیدبا استفاده از فایل کانفیگ وب پک(webpack.config)در این روش شما میتونید با مراجعه به فایل کانفیگ وب پک و تغییر پراپرتی های شی devServer این کار، را انجام دهید.devServer: { historyApiFallback: true, noInfo: true, overlay: true, host: '0.0.0.0', // you can replace &quotlocalhost&quot or real network ip port:3000 }, این کد فایل کانفیگ وب پک من هست و پراپرتی که مهمه واسمون توی این بحث hostامیدوارم این مقاله واستون مفید واقع شده باشه به خدای بزرگ میسپارمتون. ابوالفضل ماهرانی ابوالفضل ماهرانی Fri, 05 Nov 2021 00:32:19 +0330