توضیحات دانلود نظرات اشتراک
تبلیغات

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

1396/12/25
هادی اکبرزاده
راهنمای ابزارهای برنامه‌نویسی بروزرسانی : 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 اجرا کرده و دستور زیر را تایپ کنید. منتظر اتمام نصب باشید.

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

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

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

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

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

مشخصات فایل و دانلود

  • نسخه فایل 181.4096.12
  • پسورد (در صورت نیاز) www.fullkade.com
گزارش خرابی لینک گزارش نسخه جدید راهنما تعرفه نیم‌بها

درباره نویسنده

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

[ مدیر فول کده ]

علاقه‌مند به اشتراک‌گذاری اطلاعات در هر زمینه‌ای که توان و وقتش باشه.
1836 مطلب ارسال کرده است .

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نظرات ثبت شده 5 دیدگاه

    1. حسین کاربر مهمان گفت:
      1397/11/09 در 21:43

      ممنون از شما خیلی عالی بود

      پاسخ
      20
    2. امید اقاخانی کاربر مهمان گفت:
      1399/03/29 در 14:46

      سلام وقت بخیر
      کاربرد file watcher توی phpstorm چیه؟

      پاسخ
      20
      1. هادی اکبرزاده مدیر سایت گفت:
        1399/03/29 در 15:05

        سلام. این پلاگین برای اینه که فایلایی که تعیین می‌کنیم رو بررسی کنه و عملیاتیو روشون انجام بده که یکی از این عملیات، همین مورد گفته شده در این مطلب هستش و ساس رو به css تبدیل میکنه.

        پاسخ
        1. امید اقاخانی کاربر مهمان گفت:
          1399/03/29 در 15:23

          در واقع میشه گفت trigger روی فایله
          خیلی ممنون از محبتتون تشکر

          پاسخ
          00
          1. هادی اکبرزاده مدیر سایت گفت:
            1399/03/29 در 15:46

            بله میشه به چیزای مختلفی تفسیرش کرد
            موفق باشید

            پاسخ