Sass 的 map 常常被称为数据地图,也有人称其为数组,因为他总是以 key:value 成对的出现,但其更像是一个 JSON 数据。
{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}
那么 Scss 的 map 长得与 JSON 极其相似:
$map: (
$key1: value1,
$key2: value2,
$key3: value3
)
首先有一个类似于 Sass 的变量一样,用个 $ 加上命名空间来声明 map。后面紧接是一个小括号 (),将数据以 key:value 的形式赋予,其中 key 和 value 是成对出现,并且每对之间使用逗号 (,) 分隔,其中最后一组后面没有逗号。
其中键 key 是用来查找相关联的值 value。使用 map 可以很容易收集键的值和动态插入。我们来回忆一下,在 Sass 中常用下面的方式定义变量:
$default-color: #fff !default;
$primary-color: #22ae39 !default;
我们使用 map 可以更好的进行管理:
$color: (
default: #fff,
primary: #22ae39
);
如果哪一天,你需要新增加颜色变量值,在 map 中可以非常随意的添加:
$color: (
default: #fff,
primary: #22ae39,
negative: #d9534f
);
对于 Sass 的 map,还可以让 map 嵌套 map。其实就是 map 的某一个 key 当成 map,里面可以继续放一对或者多对 key:value:
$map: (
key1: value1,
key2: (
key-1: value-1,
key-2: value-2,
),
key3: value3
);
map 的嵌套实用性也非常的强,大家可能有碰到过换皮肤的项目,可能每一套皮肤对应的颜色蛮多的,那么使用此功能来管理颜色的变量就非常的有条理性,便于维护与管理。你可以这样使用:
$theme-color: (
default: (
bgcolor: #fff,
text-color: #444,
link-color: #39f
),
primary:(
bgcolor: #000,
text-color:#fff,
link-color: #93f
),
negative: (
bgcolor: #f36,
text-color: #fefefe,
link-color: #d4e
)
);
在一些介绍 map 的老教程中,你会看到这样的方式声明 map:
$map: (
key1 value1,
key2 value2,
key3 value3
);
或者:
$map:(
key1 value1,
key2 value2,
key3 (
key-1 value-1,
key-2 value-2
),
key4 value4
);
虽然也能编译出 CSS,但建议不这样使用。