🎯 نکته اصلی

• در بخش دوم mixin‌ها، روی کاهش تکرار کد برای دکمه‌ها و عناصر مشابه تمرکز داریم.
• به جای تعریف مجدد هر ویژگی برای هر دکمه، می‌توان با mixin یکبار استایل مشترک را تعریف کرد و تنها ویژگی‌های متفاوت (مثل background-color) را تغییر داد.

📌 مثال خلاصه

Mixin دکمه‌ها:

@mixin btn($bg-color, $text-color: #fff) {
  font-size: 16px;
  font-weight: 500;
  border: 1px solid #ccc;
  color: $text-color;
  padding: 5px 16px;
  border-radius: 3px;
  margin: 10px;
  background-color: $bg-color;
  cursor: pointer;
}

فراخوانی برای هر دکمه:

.btn-success { @include btn(green); }
.btn-info    { @include btn(blue); }
.btn-danger  { @include btn(red); }
.btn-warning { @include btn(orange); }
.btn-dark    { @include btn(black); }
.btn-light   { @include btn(#ccc, #000); }

🔍 نکات مهم

• با استفاده از پارامترها در mixin می‌توان ویژگی‌های متفاوت را برای هر کلاس تعیین کرد.
• استایل‌های مشترک فقط یک بار تعریف می‌شوند، و تغییرات جزئی با پارامتر انجام می‌شود.
• مثال دیگر: ساختارهای flexbox (.x, .y, .z) نیز می‌توانند با mixin مدیریت شوند تا کد تمیزتر شود.