نقشه ها (Map)

در Sass، «نقشه (Map)» شبیه دیکشنری است؛ «کلید/مقدار» نگه می دارد. توابع «توابع نقشه Sass» برای گرفتن مقدار، ترکیب نقشه ها، حذف کلیدها و ساخت نسخه تازه اند. نقشه ها تغییرناپذیرند؛ بنابراین هر تابع، نقشه جدید می سازد.

توابع نقشه Sass چیست؟

با map-get مقدار کلید را می گیری. با map-has-key وجود کلید را می سنجی. با map-keys کلیدها را می خوانی و با map-values مقادیر را. همچنین با map-merge نقشه ها را ترکیب می کنی و با map-remove کلیدها را حذف می کنی.

خواندن مقدار و بررسی وجود کلید

«کلید (Key)» نام برچسب است و «مقدار (Value)» داده مقابل آن.

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px);
$small-size: map-get($font-sizes, "small");
$has-big: map-has-key($font-sizes, "big");

.reading-demo {
  --small: $small-size;
  --has-big: $has-big;
}

مشاهده در ادیتور

گرفتن کلیدها و مقادیر

خروجی توابع کلیدها و مقادیر، «فهرست (List)» است.

$keys: map-keys(("small": 12px, "normal": 18px, "large": 24px));
$vals: map-values(("small": 12px, "normal": 18px, "large": 24px));

.meta-demo {
  --keys: "#{$keys}";
  --values: "#{$vals}";
}

مشاهده در ادیتور

ترکیب و حذف در نقشه ها

تابع «ترکیب (Merge)» نقشه جدید می سازد؛ اصل تغییر نمی کند.

$map1: ("small": 12px, "normal": 18px, "large": 24px);
$map2: ("x-large": 30px, "xx-large": 36px);
$merged: map-merge($map1, $map2);
$removed1: map-remove($map1, "small");
$removed2: map-remove($map1, "small", "large");

.compose-demo {
  --merged: "#{$merged}";
  --removed1: "#{$removed1}";
  --removed2: "#{$removed2}";
}

مشاهده در ادیتور

نکته: می توانی بعضی توابع فهرست را روی نقشه هم به کار ببری. آن وقت هر جفت «کلید/مقدار» مثل یک فهرست دو عضوی رفتار می کند.

سه گام تمرین سریع

1. یک نقشه فونت بساز و با map-get مقدار بگیر.
2. با map-has-key وجود کلید تازه را بررسی کن.
3. نقشه دوم بساز، با map-merge ترکیب و نتیجه را چاپ کن.

برای ادامه مرتبط، فهرست ها (List) را ببین. همچنین صفحه انتخاب گرها (Selector) را بررسی کن. برای انسجام داخلی، از توابع نقشه Sass به عنوان مرجع ثابت استفاده کن.

جمع بندی سریع

• map-get مقدار کلید را می دهد.
• map-keys و map-values فهرست می سازند.
• map-merge نقشه ها را ترکیب می کند.
• map-remove کلیدها را حذف می کند.
• نقشه ها همیشه تغییرناپذیرند.