Sass (Syntactically Awesome Stylesheets) یک CSS Preprocessor است که به CSS امکانات پیشرفته اضافه می‌کند و مدیریت پروژه‌های بزرگ را آسان می‌کند.

۱️⃣ Sass چیست؟

• یک پیش‌پردازنده CSS است

• امکانات اضافه:

  • Variables → تعریف مقادیر ثابت مثل رنگ و فونت

  • Nesting → تو در تو کردن CSS

  • Mixins → تکه کدهای قابل استفاده مجدد

  • Inheritance / Extend → اشتراک قوانین بین سلکتورها

  • Functions و Operations → محاسبات ریاضی و رنگ

  • Partials و Modules → مدیریت فایل‌های CSS بزرگ

۲️⃣ سینتکس‌های Sass

• SCSS

  • شبیه CSS با {} و ;

  • رایج‌ترین سینتکس

$primary-color: #3498db;

body {
  color: $primary-color;
}

• Sass (Indented Syntax)

  • بدون {} و ;

$primary-color: #3498db

body
  color: $primary-color

۳️⃣ نصب Sass

🔹 با npm

npm install -g sass

🔹 کامپایل فایل Sass به CSS

sass style.scss style.css

🔹 حالت Watch برای بروزرسانی خودکار

sass --watch style.scss:style.css

۴️⃣ مزایای Sass

• کد کوتاه‌تر و خواناتر

• کاهش تکرار CSS با Variables و Mixins

• مدیریت بهتر پروژه‌های بزرگ با Partials و Modules

• امکان انجام محاسبات و عملیات پیچیده روی CSS

• پشتیبانی کامل از CSS و قابلیت کامپایل به CSS استاندارد

۵️⃣ نکات مهم

• SCSS بیشتر استفاده می‌شود، چون شبیه CSS است

• Sass برای پروژه‌های متوسط و بزرگ ضروری است

• می‌توان Sass را با Webpack, Gulp, Vite یا npm scripts کامپایل کرد