تبدیل SASS به CSS :

برداشت اشتباهی که خیلی از افراد از SASS دارند این است که پس از اتمام کار می بایست فایل ها (SASS،SCSS) مستقیما بر روی سرور قرار گیرند تا مرورگر آن ها را بخواند.

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

برای کامپایل یا تبدیل SASS به CSS می توانید با استفاده از Ruby و نصب SASS روی آن و یا نرم افزارهایی همچون Prepros این کار را به صورت لحظه به لحظه و یا به یکباره انجام داد.

 چرا باید از SASS استفاده کرد؟

 اگر شما با برنامه نویسان کامپیوتری در مورد کدنویسی front-end صحبت کرده اید آن ها به شما گفته اند که HTML و CSS زبان احمقانه ایست چون کدهای آن از پیش از تعریف شده است و بارها و بارها تکرار می شود ، حقیقت این است که آن ها در این مورد نصف شما حق دارند.

زبان های برنامه نویسی همچون C++ دارای یک مفهوم رایج به نام DRY یا ( Don’t Repeat Yourself ) مواجه هستند و نمی توانند همچون طراحان front-end کدهای زیادی را کپی کنند. آن ها با مفاهیم ساختی همچون تعریف توابع و … رو به رو هستند.

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

شما می توانید با استفاده از سینتکس ها و نوشتن توابع سرعت و قدرت خود را در کدنویسی front-end افزایش دهید و هم به دوستان برنامه نویس خود بگویید که کد نویسی front-end آن چنان که فکر می کنند بد نیست.

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

سینتکس جدیدتر به عنوان scss شناخته شده و فرمت دهی بلاک ها تو این سینتکس شبیه همون css هست. یعنی دقیقا آکولادها و ; به همون معنی که تو css هست، اینجا هم هست.

ممکنه بپرسید کار sass چی هست اصلا؟ دیدید تو زبان های برنامه نویسی ما متغیر ، فانکشن ، عملگر و … داریم؟ ولی تو سی اس اس همچین چیزی رو نداریم. حالا فکر کنید اگر میشد تو سی اس اس از این ها استفاده کرد چقدر سرعت نوشتن کدها بالا میرفت! Sass به شما این امکان رو میده که از این ویژگی هایی که تو سی اس اس نداریم (همون متغیر و تابع و عملگر و … رو منظورمه) استفاده کنیم و نوشتن کدهای سی اس اس سریع تر و جذاب تر بشه.

لازم به ذکره که فریم ورک Foundation هم از sass پشتیبانی میکنه.

متغیرها

در sass ما میتونیم متغیر تعریف کنیم. اطلاعاتی که قراره چندین بار در قسمت های مختلف یک فایل css نوشته بشه میتونه داخل یه متغیر نگه داری بشه و هروقت جایی قرار شد اون اطلاعات رو بنویسیم میتونیم به جاش اسم متغیر رو بنویسیم. به این ترتیب وقتی مقدار متغیری که تعریف کردیم رو تغییر بدیم، جاهایی که از این متغیر استفاده کردیم مقدارش تغییر میکنه. شما میتونید رنگ ها یا اسم فونت ها یا هر مقدار css که فکر میکنید دوباره قراره ازش استفاده کنید رو داخل متغیر ذخیره کنید. Sass از علامت $ برای ساخت متغیر استفاده میکنه.