z-indexをSassで管理する

今日はCSSのz-indexプロパティの上手な管理方法について書きます。
そもそもz-indexって管理が煩雑になりがちなんですよね。
オーバーレイする要素はだいたい10くらいかな？その上に重なるのは20にして…。モーダルは9999にしておくか、とか個人的には結構適当な感じで指定してしまっています。
そんな困った僕に素敵なソリューションがありました。

Sassy Z-Index Management For Complex Layouts

ミソはSassの配列とindex関数を使うこと。

$elements: project-covers, sorting-bar, modals, navigation;

.project-cover {
    z-index: index($elements, project-covers);
}

変数（$elements）にカンマ区切りで単語を入れます。scssではこれが配列になります。半角スペース区切りでも配列になります。
その配列をsassのindex関数を使って呼び出します。第一引数は配列を指定し、第二引数は該当の単語を指定します。

.project-cover {
    z-index: 1;
}

配列のインデックス値が取得できるわけですね。
コードが綺麗で保守性も上がるのでオススメです！