用 SCSS 的 Map 建立一份共用色票
整理用 SCSS 的 map 定義一份基礎色票，搭配 @each 批次產生 bg-／text-／border- 開頭的顏色工具類別，再用 map-get 讓區塊樣式（footer、社群圖示）引用同一份色票命名的做法，並附上顏色命名工具的參考連結。
W
顏色散落在樣式表各處直接寫死色碼（#FECC00），改配色時要一個個找出來改，還很容易漏掉。這篇整理當時用 SCSS 的 map 建立一份共用色票的做法。
定義基礎色票
// 共用 color
// example: bg-color | text-color | border-color
$colorGroup: (
'supernova': #FECC00,
'fiord': #4C596C,
'black': #000,
'alto': #DBDBDB,
'dustyGray': #999,
'gray': #7F7F7F,
);
顏色的命名不是憑感覺亂取，而是先把色碼貼到 name that color 這類工具查出對應的顏色名稱，統一用查出來的名稱當 key，之後不管是自己還是接手的人，看到 fiord 都知道對應的是哪個藍灰色，不用每次都去猜色碼。
用 @each 批次產生工具類別
// example: bg-color | text-color | border-color
@each $name, $color in $colorGroup {
.bg-#{$name} {
background: $color;
}
.text-#{$name} {
color: $color !important;
}
.border-#{$name} {
border: 1px solid $color;
}
}
六個顏色，一次產生十八個工具類別（bg-supernova、text-supernova、border-supernova……），之後要用某個顏色當背景、文字或邊框，直接在 HTML 上疊 class，不用再手寫一次色碼。
區塊各自的顏色需求：另建一份 map，引用同一份色票
不同區塊要用到的顏色不會剛好都落在基礎色票的命名裡，這時候另外建一份「語意化」的 map，用 map-get() 去引用基礎色票裡的顏色：
// footer 選單字體與背景顏色
$footerGroup: (
'menu-title-color': map-get($colorGroup, 'nobel'),
'menu-normal-color': map-get($colorGroup, 'doveGray'),
'menu-hover-color': map-get($colorGroup, 'treePoppy'),
'bottom-bg-color': map-get($colorGroup, 'shark'),
'privacy-text-color': map-get($colorGroup, 'doveGray'),
'border-color': map-get($colorGroup, 'alto'),
'footer-bg': white,
);
社群圖示這類需要品牌色的區塊，也能混用漸層值：
// socialIcon
$socialGroup: (
'users': #2ab1f3,
'fb': #3b5998,
'twitter': #1DA1F2,
'ig': linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%),
'telegram': #0088cc,
'youtube': #cd201f,
);
調用方式
footer {
@include z-index(footer);
.footer-area {
letter-spacing: 1px;
background: map-get($footerGroup, 'footer-bg');
@include relative();
.footer-box {
// ...
}
}
.footer-privacy {
// ...
}
}
map-get($footerGroup, 'footer-bg') 一路往下追，最終取到的還是 $colorGroup 裡定義的那個色碼——改配色時只要動 $colorGroup 這一份，所有引用到它的地方全部跟著換。
現在還用得到嗎
用一份共用來源管理顏色的思路完全沒過時，這正是現在「設計代幣」（design tokens）概念在做的事。真正被取代的是實作方式：SCSS 的 map 只在編譯時期存在，瀏覽器執行時完全看不到這些變數，深色模式這類需要執行期動態換色的需求，SCSS map 處理不了（只能編譯出兩份完全獨立的 CSS，切換時整份替換）。現在的做法多半改用 CSS 自訂屬性（CSS Custom Properties），整理在《CSS 自訂屬性與設計代幣：取代 SCSS 的顏色 map》。