Sass 的 map 常常被稱為數據地圖,也有人稱其為數組,因為他總是以 key:value 成對的出現,但其更像是一個 JSON 數據。
{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}
那么 Sass 的 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,但建議不這樣使用。
現在你可以自己了解一下Map的用法結構!
請驗證,完成請求
由于請求次數過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報