【 sass 】z-indexをsassで管理する

今日とあるプロジェクトの修正で
z-indexがめちゃくちゃなサイトに出会いました。

そこで今回はz-indexって「どうやって管理したらいいのか」について

sassの変数を利用した方法があったので
それについて、調べたことを書いていこうと思います！

そもそも実行ファイルを直書きで手を加えると
追加するたびにその人のやり方・癖を理解していかないといけません。

「10人が手を加える」＝ 「10通りのやり方を理解する必要がある」 ということになります。

10人が別々の理由で z-indexを利用していることを
イメージするとわかりやすのかなと、、、、（恐）

子供達に道路を渡らせる時にはまず
「手をあげる」「保護者が先頭に立つ」「右左確認してからわたる」など
交通ルールを整えていかないと行けません。
フロントの交通ルールづくりの一つが
sassやbabelを使った環境構築にあたるということですね！

ということで、やっていきましょう。

Sassy Z-Index Management For Complex Layouts — Smashing Magazine

sassでz-indexの管理をする

sassは変数と配列が使えます。そして
指定したインデックスを取得する
index() という関数がございますので

$elements: project-covers, navigation, modals;

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

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

という風に書くことができます。

これをビルドすると

.header {
  z-index: 1;
}

.apply--modal {
  z-index: 3;
}

こういう風にz-indexも直接書き換えるのではなく、 変数を配列で管理していくことで
初めての人が書き加えれられるようにしていく必要がございます！

下のsassビルダーでぜひ確認してみてください！

www.sassmeister.com

↓↓参考

https://www.smashingmagazine.com/2014/06/sassy-z-index-management-for-complex-layouts/