Sass چیست؟ بررسی کامل Sass و تفاوت آن با CSS + مثال‌های کاربردی

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

Sass چیست؟

Sass مخفف عبارت "Syntactically Awesome Stylesheets" به حساب می‌آید و در زبان فارسی «سَس» خوانده می‌شود. وقتی از این مفهوم حرف می‌زنیم، یک پیش‌پردازنده CSS را در نظر داریم (پیش‌پردازنده یعنی ابزاری که قبل از اجرای نهایی کد، آن را پردازش و تبدیل می‌کند). در Sass می‌توان از قابلیت‌هایی مثل متغیرها، توابع، کدهای تو در تو و غیره استفاده کرد؛ قابلیت‌هایی که در CSS معمولی یا وجود ندارند یا استفاده از آن‌ها محدود است.

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

چرا Sass ایجاد شد؟

در آغاز دوران استفاده از وب، فایل‌های CSS بسیار سبک و ساده بودند. اما با گسترش وب‌سایت‌ها و برنامه‌های تحت وب، اندازه و پیچیدگی این فایل‌ها به‌ تدریج افزایش یافت. در نتیجه توسعه‌دهندگان با چالش‌هایی مانند تکرار زیاد کدها، دشواری در تغییر رنگ‌ها و فونت‌ها و نبود نظم مشخص در ساختار کدنویسی روبه‌رو شدند. همین مسائل زمینه‌ساز پیدایش مفهوم Saas شد، ابزاری که هدف آن افزایش قابلیت برنامه‌نویسی و مدیریت بهتر در CSS است.

Sass چه مشکلی از CSS حل می‌کند؟

CSSبه‌‌صورت ذاتی زبان ساده‌ای است، اما همین سادگی در پروژه‌های بزرگ به ضعف تبدیل می‌شود. برخی از مشکلات اصلی CSS عبارت‌اند از:

• نداشتن متغیر (در نسخه‌های قدیمی)

• تکرار بیش از حد کدها

• سختی مدیریت فایل‌های بزرگ

• نبود ساختار مشخص برای ماژول‌بندی

اینجاست که باید بدانیم کاربرد Sass چیست؟ و چرا مهم است. جواب این سوال این‌طور داده می‌شود که با اضافه ‌کردن متغیرها، mixinها، فایل‌های جداگانه و nesting، این مشکلات را برطرف می‌کند. مثلا اگر رنگ اصلی سایت تغییر کند، کافی است فقط یک متغیر را ویرایش کنیم (نه صدها خط CSS را)!

Sass چگونه کار می‌کند؟

Sass به‌صورت مستقیم توسط مرورگر ما خوانده نمی‌شود. روند کار آن به این شکل است که:

1. توسعه‌ دهنده کد Sass می‌نویسد.

2. یک ابزار به نام کامپایلر Sass اجرا می‌شود.

3. کد Sass به CSS معمولی تبدیل می‌شود.

4. فایل CSS نهایی در سایت استفاده می‌شود.

برای درک بهتر مسئله باید بدانید که Sass در مرحله توسعه استفاده می‌شود، نه اجرا (مرورگر فقط CSS خروجی را می‌بیند). این یعنی Sass هیچ تفاوتی در نحوه نمایش سایت برای کاربر ایجاد نکرده و فقط فرآیند توسعه را بهتر می‌کند.

بررسی مزایا و محدودیت های Sass

همان‌طور که اشاره کردیم Sass در ابتدا به منظم‌تر شدن کدنویسی کمک می‌کند. در اصل یکی از مهم‌ترین مزیت‌های آن کاهش چشمگیر تکرار کدهاست. همچنین مدیریت رنگ‌ها، فونت‌ها و اندازه‌ها ساده‌تر می‌شود و تغییرات کلی سایت با ویرایش چند خط محدود انجام می‌گیرد. ساختار فایل‌ها شفاف‌تر شده و پروژه‌ها (به ‌ویژه در مقیاس بزرگ)، خواناتر و قابل نگهداری‌تر می‌شوند. این ویژگی‌ها باعث می‌شود کار تیم طراحی سایت راحت‌تر پیش برود و سرعت توسعه پروژه هم افزایش پیدا کند. مخصوصا زمانی که چند نفر همزمان روی یک پروژه کار می‌کنند. در کنار این مزایا، محدودیت‌های زیر را هم در استفاده از Sass در نظر داشته باشید:

• نیاز به یادگیری اولیه

• نیاز به ابزار کامپایل

• ممکن است برای پروژه‌های خیلی کوچک ضروری نباشد

با این حال، در بیشتر پروژه‌های جدی و هدف‌دار، مزایای Sass بسیار بیشتر از محدودیت‌های آن است.

تفاوت Sass و SCSS چیست؟

این نکته را به یاد داشته باشید که وقتی درباره Sass چیست؟ صحبت می‌کنیم، معمولا منظورمان SCSS است. چون خواناتر بوده و یادگیری آن برای کسانی راحت است که CSS را تا حد متوسط آموزش دیده‌اند. همچنین فراموش نکنید که Sass در واقع دو نوع سینتکس (قواعد نحوی) دارد. تفاوت آن‌ها فقط در نحوه نوشتن کد است، نه در قابلیت‌ها:

• Sass(قدیمی‌تر): بدون آکولاد و سمی‌کالن

• SCSS(رایج‌تر): شبیه CSS معمولی

Mixin، Variable، Nesting و Extend با مثال

برای استفاده از Sass و تعریف مقادیر مختلف به اطلاعات این بخش توجه ویژه داشته باشید و موارد ارائه شده را به طور دقیق با هم مقایسه کنید.

Variable(متغیر)

متغیر برای ذخیره مقادیر تکراری مثل رنگ، فونت یا اندازه استفاده می‌شود تا در صورت نیاز فقط یک‌ بار آن را تغییر دهیم.

Nesting (تو در تو نویسی)

Nesting باعث می‌شود کدهای مرتبط با هم را داخل هم بنویسیم تا ساختار HTML بهتر مشخص شود و کد خواناتر باشد.

Mixin

Mixin برای تعریف یک مجموعه از استایل‌هاست که می‌توان آن را در چند جای مختلف پروژه استفاده کرد (بدون تکرار کد).

Extend

Extend زمانی استفاده می‌شود که چند المان استایل مشترک دارند و می‌خواهیم این استایل‌ها را بین آن‌ها به اشتراک بگذاریم.

نحوه نصب و استفاده از Sass

در مورد نصب و استفاده این ابزار، سایت رسمی Sass سه روش اصلی معرفی می‌کند:

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

• با استفاده از پکیج منیجرهای سیستم مثل "Chocolatey" در ویندوز یا "Homebrew" روی "macOS" و لینوکس می‌توانید نسخه "Dart Sass" را نصب کنید.

• "Node.js" روی دستگاهتان نصب شود و با اجرای "npm install -g sass" در ترمینال، نسخه جاوااسکریپتی Sass را نصب کنید که در اغلب پروژه‌ها مناسب است.

• پس رایج‌ترین روش نصب Sass چیست؟ روش سوم که به راحتی Sass را در خط فرمان استفاده می‌کنید تا فایل‌های .sass یا .scss به .css تبدیل شود. برای این کار ابتدا "Node.js" را از وب سایت مربوط به همین ابزار دانلود کنید. 

پس از نصب، این ابزار فرمان "npm install -g sass" را داخل ترمینال قرار دهید:

پس از این مرحله ابتدا "index. Html" و پس از آن دو فایل زیر را ایجاد کنید:

• input.scss

• output.css

در مرحله بعدی کد Html را وارد کرده و css را لینک‌دهی کنید:

حالا فرمان "sass --watch input.scss output.css" را در ترمینال وارد کنید:

با مشاهده عبارت "complied input.scss to output.css." در بخش پایین ترمینال با رنگ سبز کار شما به پایان رسیده و ارتباط میان sass و css کاملا برقرار شده است.

ساختار فولدر بندی حرفه‌ای Sass در پروژه‌های بزرگ

در پروژه‌های بزرگ، فایل‌بندی اهمیت زیادی دارد. به همین دلیل یک ساختار رایج را به شکل زیر در نظر می‌گیریم:

• base/

• components/

• layout/

• pages/

• themes/

• abstracts/

• vendors/

• main.scss

مقایسه Sass با دیگر Preprocessor ها

برای انتخاب یک پیش‌پردازنده مناسب CSS، باید بین قدرت، سادگی و انعطاف‌پذیری تعادل برقرار کرد.Sass با وجود یادگیری سخت‌تر و عملکرد کمی کندتر، به‌دلیل امکانات کامل و جامعه کاربری بزرگ، انتخاب مناسبی برای پروژه‌های بزرگ و ساختار یافته است. Less گزینه‌ای ساده‌تر و سبک‌تر محسوب می‌شود که برای پروژه‌های کوچک تا متوسط و توسعه سریع مناسب‌تر است. Stylus بیشترین انعطاف را در سینتکس ارائه می‌دهد، اما به‌دلیل جامعه کوچک‌تر و مستندات محدود، بیشتر برای توسعه‌دهندگان باتجربه کاربرد دارد.

چشم انداز و آینده Sass

مطابق اطلاعات سایت رسمی Sass ، چشم‌انداز و آینده این ابزار روشن و امیدوارکننده به نظر می‌رسد، هرچند دنیای CSS در حال پیشرفت و تغییر است. با اینکه برخی قابلیت‌هایی که قبلا تنها با Sass ممکن بود (مانند متغیرها و nesting)، اکنون در CSS استاندارد هم پشتیبانی می‌شوند، اما Sass همچنان در پروژه‌های بزرگ و تیمی کاربرد گسترده دارد.

همچنین"Dart Sass" به‎‌صورت فعال توسعه پیدا می‌کند و با استانداردهای جدید CSS هماهنگ شده تا ابزارهایی برای ادغام با سیستم‌های ساخت مانند "Webpack" و "Vite" داشته باشد. این مسئله باعث می‌شود که طراحان وب‌سایت به راحتی بتوانند پروژه‌های پیچیده را سازمان‌دهی و نگهداری کنند.