SCSS یا SASS رو بخوام توضیح خیلی ساده بدم، می‌تونم بگم که کدنویسی ساده‌تر، اصولی‌تر و سریعتر CSS هست. ما وقتی که می‌خوایم یه سایتی رو برنامه نویسی کنیم، استایل‌های زیادی استفاده می‌کنیم؛ اگر بخوایم که اصولی هم کدنویسی کنیم، مجبوریم که کلاس‌هایی رو هم کپی کنیم. (البته اسمشون) و به ترتیب بریم جلو که اشتباه نکنیم. خب توی روش عادی کدنویسی که با CSS انجام میدیم، زمان خیلی زیادی رو از دست میدیم. شاید بعضی وقت‌ها که داریم میبینیم زمانمون رو داریم از دست میدیم و داره تلف میشه، ترجیح می‌دادیم که یه کم غیراصولی کدنویسی کنیم.
ولی بعد از اینکه SCSS معرفی شد، دیگه کدنویسی CSS هم خیلی راحت‌تر شده. یعنی کد تکراری دیگه نیازی نیست بنویسیم. همه چیز قابل فهم‌تر شده. تازه پوستم هم لطیف‌تر شده :-)
ما توی SCSS اگر میبینیم که از یه ساختار کدی زیاد داریم استفاده می‌کنیم، می‌تونیم به تابع یا همون mixin تبدیلش کنیم. و هر جایی که نیاز بود فقط صداش بزنیم. البته هر چند که خروجی‌ای که SCSS تولید می‌کنه، دقیقاً همون CSS هست. ولی ما کاری نداریم خروجی چی هست. ما فقط با SCSS کار می‌کنیم.
توی SCSS خطایابی‌هامون هم راحت‌تر شده. یکی از امکانات بسیار مهمی که بهمون داده، امکان تعریف متغیر هست. مثلاً فرض کنید توی حالت ساده همون CSS، مشتری از ما خواسته که یه سایتی رو براش طراحی کنیم. خب. سایت رو طراحی کردیم. بعد از یک سال یا اصلاً همون روز اول، مشتری میگه از این رنگ قالب سایت دیگه خوشم نمیاد. مثلاً سبزه. میگه نارنجیش کن. خب. توی حالت CSS ساده که قبلاً می‌نوشتیم، مجبور بودیم توی چند هزار خط کد بریم ببینیم کجا از رنگ سیز استفاده کردیم، تبدیلش کنیم به نارنجی. خب. این کار زمانبر بود و احتمال اشتباه هم توش زیاد بود.
ولی توی SCSS ما چون می‌تونیم متغیر تعریف کنیم، همون اول کار یه متغیر تعریف می‌کنیم مثلاً به اسم MainColor. یعنی رنگ اصلی. اینجا بهش رنگ سبز میدیم. هر جایی که نیاز داشتیم از این متغیره استفاده می‌کنیم. حالا مشتری اگر بخواد که رنگ همه جا رو از سبز به هر رنگ دیگه‌ای تبدیل کنه، فقط کافیه که ما یک جا رو تغییر بدیم. دیگه همه جا خودش عوض میشه.
سعی کردم خیلی راحت توضیح بدم که SCSS چیه و چه فایده‌ای داره.