SASS 中的映射（Maps）
本文將說明 SASS 中的映射（Maps）。
我們將說明 SASS 映射（Maps）的基礎與進階用法，並提供實用範例。
YouTube Video
SASS 中的映射（Maps）
什麼是 SASS 中的映射（Map）？
SASS 中的映射（Map）是一種保存鍵值對的資料結構，類似於 JavaScript 的物件或 Python 的字典。透過在 SASS 中使用映射，您可以更簡潔地管理複雜樣式並提升維護性。
映射（Maps）的基本語法
SASS 中的映射是用小括號 () 來定義。語法如下：。
1$map-name: (
2 key1: value1,
3 key2: value2,
4 key3: value3
5);例如，若要建立一個用來管理色彩主題的映射，可以如此定義：。
1$colors: (
2 primary: #3498db,
3 secondary: #2ecc71,
4 danger: #e74c3c
5);從映射中取得值
在 SASS 中，可以使用 map.get() 函數來從映射取得值。
使用範例：
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8.button {
9 background-color: map.get($colors, primary);
10}輸出：
1.button {
2 background-color: #3498db;
3}- 這段程式碼從
$colors映射中取得primary的顏色值，並作為按鈕的背景色。
設置映射中的鍵和值
可以用 map.set() 函數為特定鍵設定新值。如果鍵已存在，則其值會被覆蓋。
範例用法
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8// set danger color
9$updated-colors: map.set($colors, danger, #e74c3c);
10
11.button-danger {
12 background-color: map.get($updated-colors, danger);
13}- 這段程式碼將
danger鍵加入映射，並設為按鈕的背景顏色。
輸出
1.button-danger {
2 background-color: #e74c3c;
3}從映射中移除鍵
透過 map.remove() 函數，可以從映射中移除指定的鍵和值。
範例用法
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71,
6 danger: #e74c3c
7);
8
9// remove danger color
10$reduced-colors: map.remove($colors, danger);
11
12.button-primary {
13 background-color: map.get($reduced-colors, primary);
14}
15
16.button-danger {
17 background-color: map.get($reduced-colors, danger);
18}- 這段程式碼會從映射中移除
danger鍵，因此button-danger的背景顏色將成為null。
輸出
1.button-primary {
2 background-color: #3498db;
3}向映射中新增鍵和值
用 map.merge() 函數可以向現有映射添加新的鍵和值。
範例用法
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8$extended-colors: map.merge($colors, (danger: #e74c3c));
9
10.button-danger {
11 background-color: map.get($extended-colors, danger);
12}- 這段程式碼將
danger鍵新增到現有的 SASS 映射中，並設為按鈕的背景顏色。
輸出
1.button-danger {
2 background-color: #e74c3c;
3}一次向映射新增多個鍵和值
使用 map.merge() 函數，可以一次向現有映射新增多個鍵和值。
範例用法
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8$extended-colors: map.merge($colors, (
9 danger: #e74c3c,
10 warning: #f39c12,
11 info: #8e44ad
12));
13
14.button-danger {
15 background-color: map.get($extended-colors, danger);
16}- 這段程式碼同時向現有的 SASS 映射中新增多個鍵和值。
檢查映射中是否存在某鍵
map.has-key() 函數可用於檢查映射中是否存在特定鍵。
範例用法
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.has-key($colors, primary); // true
9@debug map.has-key($colors, danger); // false取得映射中的所有鍵或所有值
取得所有鍵
利用 map.keys() 函數，可以取得所有鍵。
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.keys($colors); // (primary, secondary)取得所有值
利用 map.values() 函數，可以取得所有值。
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.values($colors); // (#3498db, #2ecc71)遍歷映射
在 SASS 中，可以用 @each 指令來遍歷映射。
範例用法
1$colors: (
2 primary: #3498db,
3 secondary: #2ecc71,
4 danger: #e74c3c
5);
6
7@each $name, $color in $colors {
8 .color-#{$name} {
9 background-color: $color;
10 }
11}- 這段程式碼遍歷 SASS 映射中的每個鍵和值，並自動為每個顏色產生一個 class。
輸出
1.color-primary {
2 background-color: #3498db;
3}
4
5.color-secondary {
6 background-color: #2ecc71;
7}
8
9.color-danger {
10 background-color: #e74c3c;
11}處理巢狀映射（Nested Maps）
映射也可以具備巢狀結構。此時，可使用巢狀的 map.get() 函數。
範例用法
1@use "sass:map";
2
3$themes: (
4 light: (
5 background: #ffffff,
6 text: #000000
7 ),
8 dark: (
9 background: #000000,
10 text: #ffffff
11 )
12);
13
14body {
15 background-color: map.get(map.get($themes, light), background);
16 color: map.get(map.get($themes, light), text);
17}- 這段程式碼從巢狀 SASS 映射中取得
light主題的背景與文字顏色，並套用到body上。
輸出
1body {
2 background-color: #ffffff;
3 color: #000000;
4}映射用途範例：響應式設計
利用映射，可以更簡易地管理媒體查詢與響應式設計。
範例用法
1$breakpoints: (
2 small: 480px,
3 medium: 768px,
4 large: 1024px
5);
6
7@each $label, $size in $breakpoints {
8 @media (max-width: $size) {
9 .container-#{$label} {
10 width: 100%;
11 }
12 }
13}- 這段程式碼利用 SASS 映射來自動為每個斷點產生響應式容器 class。
輸出
1@media (max-width: 480px) {
2 .container-small {
3 width: 100%;
4 }
5}
6
7@media (max-width: 768px) {
8 .container-medium {
9 width: 100%;
10 }
11}
12
13@media (max-width: 1024px) {
14 .container-large {
15 width: 100%;
16 }
17}結論
SASS 映射是一個強大的樣式表組織工具，有助於提升彈性與可重複使用性。映射可應用於多種情境，例如數值管理、遍歷、以及實現響應式設計。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。