PostCSSでのz-indexの管理を簡単にしたい！

背景

z-indexの管理がややこしすぎる、、、
どこが何より上なのかよくわからず、検証するとOverlayよりHeaderが上にある！！
やば！修正修正！
誰にもバレずに、即修正！
みたいなことがしょっちゅう、、、
特に自分で設計してないものだとすぐに迷子、、、
もちろん作っていても迷子

やり方

STEP 1. postcss-each をインストール

STEP 2. 下記のように記述

:root {
 @each $key, $value in (Swiper, Header, BackToTop, Overlay, Modal), (1, 3, 5, 7, 9) {
    --z-index-$(key): $(value);
  }
}

STEP 3. 呼び出し方

header {
 z-ndex: var(--z-index-Header);
}

以上