نحوه افزودن و استفاده از فایل های SASS در ویژوال استودیو

Sass چیست ؟

به طور خلاصه و ساده میشه گفت Sass یک زبان برنامه نویسی اسکریپتی برای نوشتن کدها و استایل های css هست. یعنی توسط sass شما می تونید برای دستورات css متغیر تعریف کنید، شرط قرار بدید، استایل های تو در تو بنویسید و کدهای css رو از حالت خشک و ثابت خارج کنید و استایل های داینامیک تری داشته باشید.

کلمه Sass مخفف Syntactically Awesome Style Sheets می باشد. در css معمولی ما قادر نیستیم برای استایل ها شرط قرار بدهیم، یا متغیر تعریف کنیم و مقادیر مختلف به متغیر ارسال کنیم. اما توسط Saa این توانایی ها وجود خواهد داشت. Sass یک افزونه یا اکستنشن می باشد که به css اضافه می شود و قابلیت هایی را اضافه می کند. Sass کمک می کند استایل های پیشرفته و بزرگ را ساده تر و سریع تر بنویسیم.

چگونه از Sass در ویژوال استودیو استفاده کنیم ؟

به طور پیش فرض اکستنشن Sass در ویژوال استودیو موجود نیست.

• برای افزودن این افزونه ابتدا وارد سایت marketplace.visualstudio.com بشید.
• در قسمت جستجو در سایت کلمه Web Compiler رو سرچ کنید.

• همانطور که در تصویر بالا می بینید 2 تا افزونه Web Compiler پیدا شد. اولی برای نسخه های 2015، 2017 و 2019 از ویژوال استودیو هست و دومی برای نسخه 2022. نسخه 2022 رو باز می کنیم و دانلود می کنیم. بعد از دانلود اکستنشن را نصب کنید.
• بعد از نصب افزونه یک پروژه وب در ویژوال استودیو ایجاد کنید. از منوی Extensions گزینه Manage Extensions را انتخاب کنید. در بخش Installed باید Web Compiler برای شما نصب شده باشد.

تا اینجای کار کامپایلر جهت استفاده از Sass به درستی نصب شده است.

چگونه یک فایل Sass در ویژوال استودیو ایجاد کنیم ؟

حالا ببینیم چگونه می تونیم یک فایل sass را در ویژوال استودیو ایجاد کنیم.

• روی پوشه css در wwwroot کلیک راست کنید و گزینه Add new Item را انتخاب کنید.
• کلمه scss را جستجو کنید تا فایل scss برای شما پیدا شود.
• همانطور که در تصویر زیر می بینید معمولا به طور پیش فرض یک فایل به نام site.css در پوشه css وجود دارد. یک فایل به نام site.scss ایجاد کنید تا زیر مجموعه این فایل قرار بگیرد و کامپایلر این فایل شود.

• حالا باید روی نام فایل scss کلیک راست کنیم و منوی Web Compiler و سپس Compile file رو بزنیم تا فایل کامپایل شود.
• اگر در Solution Explorer نگاه کنید یک فایل json به نام compilerconfig ایجاد شده است . از اینجا ببعد می تونیم از scss استفاده کنیم.