什么是 map 数据类型？
在 SASS 中，map 是一种比较特殊的数据类型。它类似于 JavaScript 中的对象，也可以理解为一种键值对的集合。SASS 中的 map 由键（key）和值（value）组成，其中键是唯一的。它可以很方便地存储一些相关的配置信息、样式数据等。
如何创建 map？
我们可以使用 SASS 内置的函数 map-new() 来创建一个空的 map：
$map: map-new();
也可以在创建的同时初始化一些键值对：
$map: ( 'foo': 'bar', 'alpha': 'beta' );
如何使用 map？
读取值
我们可以使用 $map['key'] 或 $map['key']() 的形式来读取 map 中的值。其中 $map['key']() 是一个函数，如果 map 中没有这个键，则会返回 null：
-- -------------------- ---- ------- ----- - ------ ------ -------- ------ -- ---- - -------- ------------ -- ----- -------- ---------------- -- ------ -------- ---------------- -- ---- -
更新值
map 中的键和值都是可以被修改的。我们可以使用 $map: map-merge($map, (key: value)) 这个函数来更新 map 中的键值对：
-- -------------------- ---- ------- ----- - ------ ------ -------- ------ -- ----- --------------- ------- -------- ---- - -------- ------------ -- ----- -
删除键值对
我们可以使用 map-remove($map, 'key') 这个函数来删除 map 中的键值对：
-- -------------------- ---- ------- ----- - ------ ------ -------- ------ -- ----- ---------------- ------- ---- - -------- -------------- -- ---- -------- ---------------- -- ------ -
遍历 map
我们可以使用 map-keys($map) 函数来获取 map 中的所有键，然后使用 @each $key in map-keys($map) 的形式来遍历 map：
-- -------------------- ---- -------
----- -
------ ------
-------- ------
--
----- ---- -- -------------- -
-------- -
-------- -----------
-
-一个例子
下面这个例子展示了如何使用 map 来存储不同的字体家族和字体大小：
-- -------------------- ---- -------
---------- -
---------- -
--------- ------- ------------
------- ----
--
------------ -
--------- --------- -------
------- ----
-
--
----- ------ ----- -- --------- -
--------- -
------------ -------------- ----------
---------- -------------- --------
-
-我们定义了一个名为 $font-map 的 map，其中包含了两个键值对：primary 和 secondary。每个键都对应了一个嵌套的 map，用来存储这个字体家族和字体大小。在遍历 $font-map 时，我们使用 map-get($font, 'family') 和 map-get($font, 'size') 来获取对应的字体家族和字体大小。
总结
map 是 SASS 中非常强大的一种数据类型，可以方便地存储一些相关的配置信息、样式数据等。我们可以使用 SASS 内置的函数来创建、读取、更新和删除 map 中的键值对。在实际的项目中，我们可以使用 map 来更加方便地管理和维护样式代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6539a1b67d4982a6eb304d65