اگر با طراحی سایت آشنا باشید حتما SASS را شنیده اید و با آن آشنا هستید. SASS پیش پردازنده CSS می باشد که کمکمی نماید تا از ویژگی های مختلف CSS بهره مند شوید. قابلیت هایی همچون متغیر ها، قواعد تو در تو و ..... استفاده از SASS سبب می شود کد نویسی برای شما آسان تر و موثر تر شود.

Sass  چیست؟

Sass (Syntactically Awesome Style Sheets) پیش پردازنده ایست که قابلیت های ویژه ای برای CSS  ایجاد می کند. قابلیت هایی همچون متغیر ها، تو در تو نویسی،inline import  و ....  . بعبارتی SASS همچون اکستنشن برای CSS عمل می نماید و در امر سازماندهی یاری نموده و سبب افزایش سرعت ایجاد فایل های استایل شیت می شود. SASS با تمام نسخه های CSS سازگار می باشد.

فریمورک چیست ؟

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

پیش پردازنده چیست ؟

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

مزایای استفاده از پیش پردازنده:

• کاهش حجم کد: با تجمیع کد های تکراری، حجم نهایی کد پروژه شما به طور قابل توجهی کاهش می یابد.

• افزایش خوانایی: کد شما تمیزتر و خواناتر خواهد شد، زیرا دیگر نیازی به نوشتن کد های تکراری نیست.

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

• کاهش خطا: احتمال خطا در کد شما به طور چشمگیری کاهش می یابد، زیرا دیگر نیازی به نوشتن کدهای تکراری نیست.

چگونه از SASS استفاده کنیم؟

استفاده از SASS هرچند که ابزاری قدرتمند است، اما ابزاری عادی نیست و برای شروع کار با آن نیازمند نصب برخی ابزارها می باشید. ابتدا به دلیل توسعه SASS بر پایه زبان  Ruby، باید Ruby Installer را دانلود و نصب کنید. سپس از طریق این نرم افزار، پیش پردازنده SASS را به پروژه خود اضافه نمایید. پس از این مرحله، با استفاده از خط فرمان ویندوز (یا خط فرمان داخلی نرم افزار هایی همچون ویژوال استودیو کد) به داخل پروژه خود مسیردهی کنید و دستورات مورد نیاز برای شروع کار با SASS را اجرا نمایید.

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

بخش های اصلی موجود در  sass

بخش های اصلی که در SASS وجود دارند را می توان به شکل زیر معرفی نمود:

• متغیر ها: 

Import ها: 

این امکان را به شما می دهد تا چندین فایل با فرمت SASS داشته باشید و کد های خود را تقسیم نمایید و در نهایت آن ها را در یک فایل فراخوانی کنید.

• Extend:

این امکان را به شما می دهد که ویژگی ها را از کلاس های دیگر به ارث ببرید و باعث کاهش حجم کد ها شوید. دستور گسترش یا ارث بری در SASS سبب می شود مجموعهای از مشخصه های تکراری موجود در CSS را خلاصه و این مجموعه را از یکی به دیگری انتقال دهد. این ایجاد اشتراک در فایل های مشترک در حجم نهایی فایل کامپایل شده نیز مؤثر است.