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

حتما سوال می کنید پیش پردازنده css چیست؟ 
پیش پردازنده  css در واقع یک زبان اسکریپتی است که به توسعه دهندگان سمت کاربر (فرانت اند کاران) اجازه می دهد کدهای خود را به یک زبان تعریف شده نوشته و در نهایت آن را به css کامپایل (تبدیل) کنند.
پیش پردازنده های مختلفی برای css وجود دارند که از معروف ترین آنها می توان به Less , Stylus   و Sass  اشاره کرد. می توان گفت Sass محبوب ترین پیش پردازنده css است. 


قبل از اینکه در مورد Sass و فواید آن توضیحی بدهم اکیدا توصیه می کنم اگر در استفاده از css تازه کار هستید ابتدا css را به خوبی یاد بگیرید و بعد سراغ یادگیری Sass بروید.

 

(Sass  (Syntactically Awesome Style Sheets  اولین بار در ۲۸ نوامبر ۲۰۰۶ منتشر شد و در حال حاضر (زمان نوشتن این مطلب) نسخه ۳.۵.۶ آن در ۲۳ مارچ ۲۰۱۸ منتشر شده است. Sass دارای دو پسوند نام فایل sass و scss است، Scss دستور جدید sass است که از لحاظ فرمت بلوک بندی شبیه به خود css است.

 

فواید استفاده از Sass :


۱- متغیرها
مانند بقیه زبان های برنامه نویسی، این امکان را به شما می دهد که بتوانید متغیر تعریف کنید و در بخش های مختلف فایل استایل بندی خود از آن مقدار در متغیر استفاده کنید. به عنوان مثال شما می توانید در بالای فایل، متغیری برای رنگ تعریف کنید و رنگ مورد نظر خود را در آن قرار دهید، سپس در هر جایی از فایل می توانید از آن متغیر استفاده کنید.
تعریف متغیر این امکان را به شما می دهد که بجای قرار دادن کد رنگ در قسمت های مختلف فایل ، نام متغیر را قرار دهید و هر زمان که تمایل به تغییر رنگ داشتید فقط کافیست رنگ داخل متغیر تعریف شده را تغییر دهید.

به مثال زیر توجه کنید :


$font-name: Helvetica, sans-serif;
$primary-color: #444;

body {
     font: 100% $font-name;
     color: $primary-color;
}

که بعد از کامپایل به صورت زیر خواهد شد:


body {
     font: 100% Helvetica, sans-serif;
     color: #444;
}

در این مطلب توضیحات اولیه ایی در مورد Sass  و یکی از فواید آن داده شد در بخش های بعدی به بررسی سایر فواید Sass خواهیم پرداخت.