Sass Mapها ساختاری شبیه شیء (Object) در JavaScript دارند و با استفاده از Key-Value می‌توانید مقادیر را ذخیره و بازیابی کنید.

۱️⃣ تعریف Map

$theme-colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

📌 theme-colors$ یک Map با کلیدها primary, secondary, danger است

۲️⃣() map-get

• دسترسی به مقدار بر اساس کلید

$primary-color: map-get($theme-colors, primary);
body {
  background-color: $primary-color; // #3498db
}

۳️⃣ ()map-keys

• دریافت لیست کلیدهای Map

$keys: map-keys($theme-colors);
// نتیجه: primary, secondary, danger

۴️⃣ ()map-values

• دریافت لیست مقادیر Map

$values: map-values($theme-colors);
// نتیجه: #3498db, #2ecc71, #e74c3c

۵️⃣ ()map-has-key

• بررسی اینکه آیا یک کلید در Map موجود است

@if map-has-key($theme-colors, danger) {
  .alert {
    color: map-get($theme-colors, danger);
  }
}

۶️⃣ ()map-merge

• ترکیب دو Map

$more-colors: (info: #1abc9c);
$all-colors: map-merge($theme-colors, $more-colors);
// نتیجه: primary, secondary, danger, info

۷️⃣ ()map-remove

• حذف یک یا چند کلید از Map

$reduced-colors: map-remove($theme-colors, danger);
// نتیجه: primary, secondary

۸️⃣ نکات مهم

• Mapها برای سیستم رنگ، اندازه‌ها، فاصله‌ها و تنظیمات پروژه عالی هستند

• ترکیب با Loops و Functions امکان تولید کلاس‌ها و استایل‌های داینامیک را فراهم می‌کند

• Mapها با map-get و map-merge قابل مدیریت هستند و نگهداری پروژه‌های بزرگ را ساده می‌کنند

🔹 مثال عملی – تولید کلاس رنگ‌ها

$theme-colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

@each $name, $color in $theme-colors {
  .bg-#{$name} {
    background-color: $color;
  }
  .text-#{$name} {
    color: $color;
  }
}

📌 این مثال شش کلاس CSS تولید می‌کند:

• bg-primary, .text-primary.

• bg-secondary, .text-secondary.

• bg-danger, .text-danger.