sass چیست؟

sass یک روش برای استایل دهی میباشد که قابل ترجمه به فایل CSS است.
دلیل استفاده از sass بجای CSS این است که با استفاده از sass می توان کد های کوتاه تری نوشت.

از دیگر قابلیت های sass تو در تو نویسی nested می باشد. شما می توانید المان ها را داخل یکدیگر تعریف کنید و به صورت مجزا از سایر سکشن ها استایل دهی کنید.
همچنین از دیگر خصوصیت های جذاب sass توانایی نوشتن function و mixin  می باشد. با استفاده از تابع و میکسین می توانید از نو شتن کدهای تکراری جلو گیری کنید. این کار هم سرعت کد نویسی شما را افزایش می دهد و هم اشکالزدایی کد ها را سریعتر و راحتتر می کند و حتی زمان ایجاد تغییرات، اعمال تغییرات را برای ما راحتتر می کند.

برای نصب sass اگر npm (node package manager) را روی سیستم خود دارید، کافیست وارد کامند شوید و دستور زیر را اجرا کنید:
npm install -g sass

نصب sass

برای اطمینان از نصب sass می توانید دستور زیر را ایجاد کنید.
sass --version
اگر نصب شده باشد ورژن آن را به شما نمایش می دهد در غیر این صورت پیام عدم وجود sass را می دهد.

پس از نصب sass می توانید از آن در پروژه های خود استفاده کنید. فایل sass برای مرورگر  قابل فهم نیست، برای ترجمه SASS به CSS می توانید کامند را باز کنید و وارد فولدری که فایل SASS در آن قرار دارد بشوید و دستور زیر را RUN کنید:
sass --watch style.scss:style.css
در واقع این دستور میگوید که فایل sass را تماشا کن، به محض ایجاد تغییرات در فایل sass (که اینجا ما نامش را style.scss قرار داده ایم) آن را ترجمه کنه و داخل فایلی به نام style.css در همین مسیر قرار بده. نام فایل مبدا و مقصد کاملا دست شماست و می توانید هر نام دلخواهی را استفاده نمایید.

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

برای اینکه همزمان با کامپایل (compile) فایل css به صورت فشرده ایجاد شود، نیز می توانید از دستور زیر استفاده نمایید:
sass --watch --style=compressed style.scss:style.css