Mixin در Sass به شما امکان می‌دهد کدهای CSS را یک‌بار بنویسید و چندین بار در جاهای مختلف استفاده کنید.

۱️⃣ تعریف Mixin با @mixin

• برای تعریف یک تکه کد CSS قابل استفاده مجدد

• می‌تواند پارامتر بگیرد

مثال ساده

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

۲️⃣ استفاده از Mixin با @include

• برای استفاده از Mixin در Selectorهای مختلف از include@ استفاده می‌کنیم

مثال

.container {
  @include flex-center;
  height: 100vh;
  background-color: #f0f0f0;
}

📌 این کد باعث می‌شود container. تمام فرزندانش را در مرکز قرار دهد

۳️⃣ Mixins با پارامتر

• می‌توان مقدار ورودی به Mixin داد و رفتار CSS را پویا کرد

مثال

@mixin box($width, $height, $bg-color) {
  width: $width;
  height: $height;
  background-color: $bg-color;
  border-radius: 5px;
}

.card {
  @include box(200px, 100px, #3498db);
}

.button {
  @include box(120px, 40px, #2ecc71);
}

📌 این روش باعث می‌شود کد کوتاه‌تر و قابل مدیریت‌تر باشد

۴️⃣ Mixins با مقدار پیش‌فرض

• می‌توان پارامترها را اختیاری با مقدار پیش‌فرض تعریف کرد

@mixin button($color: #3498db, $padding: 10px 20px) {
  background-color: $color;
  padding: $padding;
  border: none;
  border-radius: 5px;
  color: white;
}

.btn-primary {
  @include button(); // از مقادیر پیش‌فرض استفاده می‌کند
}

.btn-secondary {
  @include button(#2ecc71, 15px 25px); // مقادیر دلخواه
}

۵️⃣ تفاوت Mixin و Extend

۶️⃣ نکات مهم

• Mixins برای کدهای پویا و قابل پارامتری عالی هستند

• استفاده از Mixin باعث کاهش تکرار و افزایش خوانایی می‌شود

• بهتر است Mixins پیچیده را در فایل‌های جزئی (Partial) نگه دارید

🔹 مثال کامل

@mixin flex-center($direction: row) {
  display: flex;
  flex-direction: $direction;
  justify-content: center;
  align-items: center;
}

.header {
  @include flex-center;
  height: 80px;
  background-color: #3498db;
}

.footer {
  @include flex-center(column);
  height: 200px;
  background-color: #2ecc71;
}

📌 این مثال دو بخش صفحه (header و footer) را با Flexbox مرکزی و جهت‌های متفاوت ایجاد می‌کند