🎯 مفهوم Mixin در SASS

• mixin برای تعریف یک بلاک کد قابل استفاده مجدد (Reusable) استفاده می‌شود.
• می‌توان استایل‌ها را یک‌بار تعریف کرد و هر جا لازم بود با @include آن را فراخوانی کرد.
• باعث کاهش تکرار کد و افزایش نگهداری‌پذیری می‌شود.

📌 تعریف mixin

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

📌 فراخوانی mixin

.btn {
  @include btn;
}

🎨 تغییر رنگ دکمه‌ها با کلاس‌های جداگانه

فقط خصوصیت موردنیاز (مثل رنگ پس‌زمینه) را مجدد تعریف می‌کنیم:

.btn-success { background-color: green; }
.btn-info    { background-color: blue; }
.btn-danger  { background-color: red; }
.btn-warning { background-color: orange; }
.btn-dark    { background-color: black; }
.btn-light   { 
  background-color: #ccc; 
  color: #000; 
}

🔍 نکات مهم

• اگر فقط می‌خواهیم ویژگی خاصی را تغییر دهیم (مثل رنگ پس‌زمینه)، نیازی به تعریف کامل استایل نیست.
• کد CSS قبلاً داخل <style> بود، اما حالا با mixin ساختاردهی هوشمند انجام می‌شود.
• استفاده از mixin باعث می‌شود فایل CSS تمیزتر و کوتاه‌تر باشد.

📦 نتیجه نهایی

✔ mixin بهترین راه برای جلوگیری از تکرار استایل‌ها در SASS است.
✔ با @include آن را به هر کلاس دلخواه اعمال می‌کنیم.
✔ فقط در صورت نیاز ویژگی‌های خاص مثل رنگ را بازنویسی می‌کنیم.