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

پاسخ هوش مصنوعی

فایل های SASS (Syntactically Awesome Style Sheets) یک پیش پردازنده CSS هستند که امکانات بیشتری نسبت به CSS عادی ارایه می دهند. با استفاده از SASS می توانید از قابلیت هایی مانند متغیرها، توابع، و نِست کردن (تودرتوی) استایل ها استفاده کنید که باعث می شود کد CSS شما مرتب تر و مدیریتی تر شود.

برای استفاده از فایل های SASS در پروژه های ویژوال استودیو، می توانید مراحل زیر را دنبال کنید:

1. نصب Node.js: ابتدا اطمینان حاصل کنید که Node.js روی سیستم شما نصب شده است. می توانید آن را از وب سایت رسمی Node.js دانلود و نصب کنید.

2. نصب SASS: بعد از نصب Node.js، در ترمینال یا CMD دستور زیر را برای نصب SASS اجرا کنید:
npm install -g sass

3. ایجاد فایل SASS: در پروژه ویژوال استودیو خود، فایلی با پسوند .scss (مثلاً style.scss) ایجاد کنید.

4. نوشتن کد SASS: در فایل .scss خود می توانید از قابلیت های مختلف SASS استفاده کنید. به عنوان مثال:
$main-color: #333;

body {
  color: $main-color;
}

5. کامپایل کردن SASS به CSS: برای تبدیل فایل .scss به .css، می توانید دستور زیر را در ترمینال اجرا کنید:
sass style.scss style.css

6. لینک کردن فایل CSS: پس از کامپایل، فایل CSS تولیدی را در HTML خود لینک کنید:

حالا می توانید از قابلیت های 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 استفاده کنیم.