HTML/CSS

2014.06.29

使用 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 設定相對應的值

$elements: header-bar, navi, modals;

element 以及後面對應的值都可以依照你的喜好作調整。為了方便日後維護,將值寫成跟 class 相同是個不錯的選擇。

接著設定每個 class 的 z-index

.header-bar {
  /* z-index: 1 */
  z-index: index($elements, header-bar);
}

.modals {
  /* z-index: 3 */
  z-index: index($elements, modals);
}
        
.navi {
  /* z-index: 2 */
  z-index: index($elements, navi);
}

z-index 會根據我們前面的設定,找到對應的數字填入。如果最前面的設定值有所更動,每次編譯後都會幫我們重新計算 z-index,我們就不用因為多增加一個 div,而要回頭調整 z-index 的順序喲!

這並不是 SASS 為了解決 z-index 所提出的方法,我們只是單純利用 SASS 的 index function 幫我們做到這件事情。

index($list, $value)
// Returns the position of a value within a list.
(回傳 $value$list 裡的順序,也可看成是索引)

SASS index function

因此 Function index 回傳的會是一個索引值,我們就利用這個特性套在 z-index 身上,達成幫我們管理 z-index 的目標。

有了這個規律後,如果今天接到一個複雜的網站專案,也可以將 z-index 獨立出來做成一份 _zindex.scss

$elements: img-cover, header-bar, navi, modals, tooltip;
$modal-elements: fields, com-dropdown, form, msg-errors, btn-close;
.img-cover {
  z-index: index($elements, img-cover);
}

.modals {
  .fields {
    z-index: index($modal-elements, fields);
  }
}

結論

雖然這只是一個 SASS Function 的簡單運用,但是卻很實用,所以在這邊分享給大家。對我來說,要手動管理 z-index 真的會很煩,用這種層級管理可以一目了然,又不用重新修改一堆程式碼,真的超好用的 XD。

此篇文章的概念取自 Sassy Z-Index Management For Complex Layouts

Hugo Giraudel 有分享他的另一種解法:http://sassmeister.com/gist/11172138,但我個人比較喜歡 Jackie Balzer 的(小聲 XD


更多 CSS 相關文章

guest
0 則留言
Inline Feedbacks
View all comments
Copyright (C) MUKI space* / Reborn Theme All Rights Reserved.