Jump to the content

z-indexをSassで管理する

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

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

注目記事

最近の記事

プロフィール

イソップ

ページの先頭に戻る

Search results

×