Sass 的 map 常常被稱為數(shù)據(jù)地圖，也有人稱其為數(shù)組，因?yàn)樗偸且?key:value 成對(duì)的出現(xiàn)，但其更像是一個(gè) JSON 數(shù)據(jù)。

{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}

那么 Sass 的 map 長(zhǎng)得與 JSON 極其相似：

$map: (
    $key1: value1,
    $key2: value2,
    $key3: value3
)

首先有一個(gè)類似于 Sass 的變量一樣，用個(gè) $ 加上命名空間來(lái)聲明 map。后面緊接是一個(gè)小括號(hào) ()，將數(shù)據(jù)以 key:value 的形式賦予，其中 key 和 value 是成對(duì)出現(xiàn)，并且每對(duì)之間使用逗號(hào) (,) 分隔，其中最后一組后面沒(méi)有逗號(hào)。

其中鍵 key 是用來(lái)查找相關(guān)聯(lián)的值 value。使用 map 可以很容易收集鍵的值和動(dòng)態(tài)插入。我們來(lái)回憶一下，在 Sass 中常用下面的方式定義變量：

$default-color: #fff !default;
$primary-color: #22ae39 !default;

我們使用 map 可以更好的進(jìn)行管理：

$color: (
    default: #fff,
    primary: #22ae39
);

如果哪一天，你需要新增加顏色變量值，在 map 中可以非常隨意的添加：

$color: (
    default: #fff,
    primary: #22ae39,
    negative: #d9534f
);

對(duì)于 Sass 的 map，還可以讓 map 嵌套 map。其實(shí)就是 map 的某一個(gè) key 當(dāng)成 map，里面可以繼續(xù)放一對(duì)或者多對(duì) key:value：

$map: (
    key1: value1,
    key2: (
        key-1: value-1,
        key-2: value-2,
    ),
    key3: value3
);

map 的嵌套實(shí)用性也非常的強(qiáng)，大家可能有碰到過(guò)換皮膚的項(xiàng)目，可能每一套皮膚對(duì)應(yīng)的顏色蠻多的，那么使用此功能來(lái)管理顏色的變量就非常的有條理性，便于維護(hù)與管理。你可以這樣使用：

$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 的老教程中，你會(huì)看到這樣的方式聲明 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，但建議不這樣使用。