Sass امکان تقسیم فایل‌های CSS به بخش‌های کوچک و مدیریت بهتر را فراهم می‌کند. این کار با استفاده از Partials و @import انجام می‌شود.

۱️⃣ Partials (فایل‌های جزئی)

• Partials فایل‌هایی هستند که با _ شروع می‌شوند

• این فایل‌ها مستقیماً به CSS کامپایل نمی‌شوند

• فقط برای وارد شدن به فایل اصلی استفاده می‌شوند

مثال

_styles/_variables.scss
_styles/_mixins.scss
_styles/_buttons.scss

📌 _variables.scss شامل متغیرها، _mixins.scss شامل Mixins و _buttons.scss شامل استایل دکمه‌هاست

۲️⃣ @import در Sass

• برای وارد کردن فایل‌های جزئی در یک فایل اصلی استفاده می‌شود

مثال

@import 'variables';
@import 'mixins';
@import 'buttons';

body {
  font-family: $font-stack;
}

📌 توجه: هنگام وارد کردن نیازی به نوشتن _ یا .scss نیست

۳️⃣ مزایای Partials و @import

1. سازمان‌دهی بهتر پروژه

2. امکان استفاده مجدد کدها

3. کاهش تکرار و افزایش Maintainability

4. امکان ترتیب‌بندی وارد کردن فایل‌ها (مثلاً متغیرها قبل از Mixins)

۴️⃣ نکات مهم

• Sass از نسخه Dart Sass استفاده می‌کند و @use و @forward جایگزین توصیه‌شده @import هستند

• @use اجازه می‌دهد فایل‌ها Namespace داشته باشند و از تداخل جلوگیری شود

مثال @use

@use 'variables';
body {
  color: variables.$primary-color;
}

۵️⃣ مثال کامل

فایل‌ها:

styles/
  _variables.scss
  _buttons.scss
  main.scss

variables.scss_

$primary-color: #3498db;
$font-stack: 'Roboto', sans-serif;

buttons.scss_

.button {
  background-color: $primary-color;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

main.scss

@import 'variables';
@import 'buttons';

body {
  font-family: $font-stack;
}

📌 خروجی CSS شامل استایل‌های body و دکمه‌ها با مدیریت بهتر و بدون تکرار خواهد بود