🔹 ششم – بررسی مفهوم و ساختار @extend در SASS

در این جلسه با مفهوم @extend آشنا می‌شیم؛ روشی برای استفاده مجدد از استایل‌ها بدون تکرار کد که باعث کم شدن حجم CSS خروجی میشه.

📌 هدف استفاده از @extend

• جلوگیری از تکرار کدها
• نگه داشتن ساختار کد تمیزتر و منظم‌تر
• ترکیب چند کلاس در یک Selector خروجی
• افزایش سرعت توسعه

🎯 مثال اصلی و مهم جلسه

.btn {
  font-size: 16px;
  font-weight: 500;
  border: 1px solid #ccc;
  color: #fff;
  background-color: #efefef;
  padding: 5px 16px;
  border-radius: 3px;
  cursor: pointer;
}
.btn-success {
  @extend .btn;
  background-color: green;
}
.btn-info {
  @extend .btn;
  background-color: blue;
}

📤 خروجی CSS پس از کامپایل:

.btn, .btn-info, .btn-success {
  font-size: 16px;
  font-weight: 500;
  border: 1px solid #ccc;
  color: #fff;
  background-color: #efefef;
  padding: 5px 16px;
  border-radius: 3px;
  cursor: pointer;
}
.btn-success {
  background-color: green;
}
.btn-info {
  background-color: blue;
}

⚠ نکات مهم

• @extend باعث ادغام Selectorها در خروجی میشه (نه کپی کردن استایل).
• فقط روی کلاس‌ها و ساختار ساده استفاده بشه.
• بهتره برای استایل‌های عمومی و ثابت مثل دکمه‌ها (btn) استفاده کنیم.
• برای استایل‌های قابل تنظیم یا پارامتری باید از @mixin استفاده بشیم.

🔍 مقایسه سریع با @mixin

📎 نتیجه‌گیری جزوه

✔ بهترین زمان استفاده از @extend → استایل‌های مشترک و ثابت (مثل .btn)
✔ اگه نیاز به انعطاف، شرط یا پارامتر داشتیم → @mixin بهتره
✔ @extend کلاس‌ها رو تو خروجی یکی می‌کنه (با هم ادغام میشه)