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;
}

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


イソップへのお悩み相談募集中

イソップに相談しませんか?

当ブログで紹介しているような、Web制作やフリーランスへの悩みをイソップに相談してみませんか?
回答できることがあれば記事の中でご紹介します。