آموزش استفاده از SASS در Intellij IDEA

1396/12/25

710 نمایش

هادی اکبرزاده

راهنمای ابزارهای برنامه‌نویسی بروزرسانی : 1398/05/15

آموزش استفاده از SASS در Intellij IDEA
کامپایر SASS یا SCSS در Intellij IDEA به وسیله‌ی Ruby و پلاگین File Watcher

استفاده از SASS کار چندان سختی نیست و در این مطلب قصد داریم تا نحوه‌ی استفاده از آن در Intellij IDEA را به شما آموزش دهیم.

مراحل انجام کار

نصب RubyInstaller
قبل از هرچیزی، ابتدا باید وارد لینک RubyInstaller شده و آن را دانلود و نصب نمایید. اگر از گزینه‌های انتخابی در هنگام نصب سر در نمیاورید، آن‌ها را به حالت پیش‌فرض رها کنید.

نصب sass روی Ruby
از منوی START، عبارت CMD را جسنجو کرده و آن را از طریق Run as administrator اجرا کنید. سپس دستور زیر را تایپ کرده و منتظر اتمام نصب باشید. حتما از اتصاب به اینترنت، اطمینان حاصل کنید.

1	gem install sass

پس از اتمام نصب، دستور زیر را اجرا کنید:

sass -v

حالا باید ورژن sass برایتان نمایش داده شود؛ برای مثال: Sass 3.5.5 (Bleeding Edge)؛ در غیر این صورت، با موفقیت نصب نشده است.

نصب پلاگین File Watchers در Jetbrains

وارد پروژه‌ی خود شده و از منوی File وارد Settings و سپس Plugins شوید.
روی Install JetBrains plugin کلیک و عبارت File Watcher را جستجو کرده و آن را نصب کنید.
نرم افزار را ریستارت کنید.
دوباره به همین Settings آمده و این بار گزینه‌ی File Watchers را در بخش Tools مشاهده ‌می‌کنید.
یک فایل یا فرمت scss بسازید.
به همین بخش File Watchers آمده و روی آیکون بعلاوه کلیک کنید.
از گزینه‌‎های موجود، Sass را انتخاب کرده و از پنجره‌ی باز شده، روی OK کلیک کنید.
دو گزینه‌ی SCSS و Sass را مشاهده می‌کنید که اضافه شده‌اند.

اگر فایل scss را باز کرده و داخل آن چیزی بنویسید، مشاهده می‌کنید که در زیر شاخه‌ی همین فایل، دو فایل دیگری نیز قرار دارند که یکی با فرمت css و دیگری با فرمت map می‌باشد. شما در هنگام لینک دهی، به هیچ وجه از فرمت SCSS استفاده نمی‌کند و همان فرمت css را می‌نویسید؛و همچنین توجه داشته باشید که در هنگام نوشتن کد در scss، در همان لحظه خروجی آن به css نیز تبدیل می‌شود و البته نباید کدتان ایرادی داشته باشد تا به درستی تبدیل شود؛ در غیر این‌صورت، لینک دهی شما، به آخرین نسخه‌ی تبدیل شده‌ی صحیح اشاره می‌کند.