z-indexをSassで管理する

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

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

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。Udemyでプログラミング解説の講師や、ドローンを使った映像制作も行っています。

プロフィール