初探 Sass Maps 與使用介紹
Sass Maps 是 Sass 3.3 版的新東西,我們可以利用它更有效的管理我們的變數;如果再搭配 if/else 條件式或 each 迴圈,可以寫出更簡單(也更程式導向) 的 CSS 語法。
雖然 Maps 有地圖或索引的意思,但你不妨把它想成是 JavaScript 的物件,這樣在觀念與使用上會比較接得起來 😊 ~
以往我們用 Sass 設定變數時,會用各種單字取名。通常會用這種比較沒有系統的寫法:
以上這些變數單拆開來,可能都看得懂。但真的要使用時,通常都要回頭翻閱;另外一個問題就是變數愈多管理愈不易。
所以我們可以利用 SASS Maps 幫我們解決這樣的問題。
Sass Maps 基本介紹
Sass Maps 的格式如下(Sass Maps 官方文件參考):
將剛剛那些變數按照 Sass Maps 格式整理一番,可以比較有系統化:
將上面的變數根據種類 / 屬性的不同,可以變成像物件一樣,需要哪一個資料再把它取出來即可。
利用 functions 包裝 Sass Maps
Sass Maps 看起來非常簡單也好上手,對吧!
不過每次都要寫 map-get
是不是覺得有點阿雜?如果不常用可能會忘記這段語法,又要回頭找資料。
會使用 Sass 的人,從本質上就是個懶鬼無誤,所以可以少寫幾個字,我們就要努力少寫幾個字💪,所以我們來利用 functions 幫我們包裝一下這段程式碼吧!
大家可以用 codepen 玩玩看
用迴圈跑 Sass Maps
除了 functions 之外,我們也可以用迴圈跑一段 Sass Maps 唷。
假設今天要做一個選單組合,而每個選單的背景顏色都不一樣,我們可以先用 Sass Maps 定義好每個選單的顏色:
接下來用迴圈跑出menu1
到menu5
的顏色以及:hover
最後編譯出來的 CSS 如下:
有感受到,多寫一點迴圈可以省很多事情的 FU 嗎😊
我能使用 Sass Maps 嗎
文章最前面有提到,Sass Maps 是 Sass 3.3 版的新東西,因此只要你的 Sass 高於 3.3 版都可以使用喔!
簡單檢測方法,直接在 terminal 輸入sass -v
就可以知道目前的 Sass 版本囉。
參考資料: Sass Maps – Jonathan Su
使用 sass 有效控管 z-index 圖層順序
利用z-index
可以讓多個圖層互相重疊,這件事情已經不稀奇了。但假設今天碰到複雜的版面,需要很多個z-index
圖層,通常我們會用99
,100
,101
,9999
… 這種無限上綱的的寫法。
但其實,這不是一種好的寫法,因為寫到最後你會不知道現在寫到哪個數字?如果是多人寫一份網站,維護也很不容易,說不定最後為了省麻煩,會 99999 不知道 9 到幾位數去 OTL…。為了解決這個問題,我們可以使用 SASS 幫我們有效管理z-index
喲!
使用 SASS 管理 z-index
讓我們先從簡單的 Layout 來看,這邊有三個圖層,分別是header
, nav
, modal
。我們最後希望的排列效果如下圖所示:

如果是用 CSS,只要注意每個圖層的先後順序,再指定相對大的值就可以了。寫法也如同圖片上的z-index
數字。
接下來讓我們使用 SASS 換個寫法吧!
一開始我們先使用 SASS 的變數,幫每個 DIV 設定相對應的值:
element
以及後面對應的值都可以依照你的喜好作調整。為了方便日後維護,將值寫成跟class
相同是個不錯的選擇。
接著設定每個 class 的z-index
:
z-index
會根據我們前面的設定,找到對應的數字填入。如果最前面的設定值有所更動,每次 compile 之後都會幫我們重新計算z-index
,我們就不用因為多增加一個 div,而要回頭調整z-index
的順序喲!
這並不是 SASS 為了解決z-index
所提出的方法,我們只是單純利用 SASS 的 index function 幫我們做到這件事情。
SASS index function
index($list, $value)
// Returns the position of a value within a list.
(回傳$value
在$list
裡的順序,也可看成是索引)
因此Function index
回傳的會是一個索引值,我們就利用這個特性套在z-index
身上,達成幫我們管理z-index
的目標。
有了這個規律後,如果今天接到一個複雜的網站專案,也可以將z-index
獨立出來做成一份_zindex.scss
。
結論
雖然這只是一個 SASS Function 的簡單運用,但是卻很實用,所以在這邊分享給大家。對我來說,要手動管理z-index
真的會很煩,用這種層級管理可以一目了然,又不用重新修改一堆程式碼,真的超好用的 XD。
- 此篇文章的概念取自 Sassy Z-Index Management For Complex Layouts。
- Hugo Giraudel 有分享他的另一種解法:http://sassmeister.com/gist/11172138,但我個人比較喜歡 Jackie Balzer 的(小聲 XD