سلام دوستان خوبم از اینکه مقاله های منو دنبال میکنید سپاسگزارم?
عنوان مقاله ام رو از عمد، این متن عجیب غریبو نوشتم!!!
چون که این روشی که میخام یادتون بدم روشیه که خودم ابداعش کردم، و گفتم باشما هم به اشتراک بگذارم شاید که نه حتما به کارتون میاد و میتونید کارهای تکراری و زمان‌برتون برای طراحی وبسایت رو تا حدی زیادی کاهش بدید.
"نتیجه این آموزش این است که شما میتونید با استفاده از 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 و مدیریت بهتر فایل پروژه است، میتونید این نرم افزار رایگان رو از این لینک دانلود کنید.
قدم سوم: ساختار پوشه پروژه
ساختار پوشه پروژه باید به این صورت باشد
projectDirectoryName/scss/styleName.scss
نکته: حتما اسم فایل scss باید با فایلی که استایل های سایتتون قرار توش قرار داده بشه باید یکی باشه جلوتر خودتون دلیلش رو میفهمید...
قدم چهارم Overrides chrome: خب در این مرحله باید پروژتون رو به عنوان پوشه Overrides اضافه کنید مانند تصویر زیر
نکته: فراموش نشود پس از انتخاب پوشه در بالای پنجره مرورگر از شما اجازه دسترسی میخواهد که شما باید اجازه رو بدید تا فولدر اضافه شود.
پس از اضافه کردن پوشه دایرکتوری ساخته شده طبق روش بالاتر که گفتم، اکنون نوبت آن رسیده که از فایل استایل اصلی ساییتون که استایل های سایت از آنجا خوانده میشود یک override درست کنید با اینکار یک کپی از اون در پوشه اضافه شده ایجاد میشود که هر تغییری دهید میتونید کاملا رانتایم مشاهده کنید!!
پس از اضافه شدن کافیست که شما به دایرکتوری اضافه شده تان بروید میبیند که تعدادی فایل به پوشه ای که ساخته اید اضافه شده در حقیقت از استایل اصلی شما در اون پوشه جهت override کپی گرفته شده است.
و ما میخواهیم از این فایل به عنوان خروجی scss استفاده کنیم!
مرحله پایانی scout-app:
در این قسمت شما باید پوشه اضافه شده به overrides رو به داخل این نرم افزار ببرید پس از انجام اینکار نرم افزار به صورت اتوماتیک اگر طبق مراحل بالا رفته بودید فایل scss شما را به عنوان ورودی در نظر میگیرد فقط شما باید فولدری که فایل ساخته شده توسط کروم هست رو به عنوان خروجی بدهید با اینکار شما با scss استایل دهی میکنید به صورت رانتایم تبدیل به css شده و شما میتوانید خروجی رو مشاهده کنید.
دوستان این نکته رو فراموش نکنید که برای اجرای صحیح حتما باید اسم فایل ورودی با فایلی که کروم ساخته برای شما یکی باشد.
طبق مراحل و شماره گذاری عکس پیش برید من در عکس بالا این کار را بر روی سایت ویرگول انجام دادم برای آموزش.
پس از انجام مراحل فوق بر روی علامت پلی بزنید، اکنون میتوانید کار را شروع کنید و به scss کد بزنید و آن رانتایم تبدیل به css کنید و خروجی رو مشاهده کنید.
وارد پنجره devTools شوید و در فولدری که اضافه کردید وارد فایل scss بشید و کدتون رو بزنید و لذت ببرید?
میتونید بعد از کد زدن ctrl + s رو بزنید تا تغییرات رو مشاهده کنید
خوشحال میشم دوستان نظرتون رو درباره این مقاله واسم بنویسید، امیدوارم که لذت برده باشید از این آموزش
اگر مشکلی داشتید در نظرات پاسخگوتون هستم.
