【SCSS】z-indexの管理を配列やmapで行う

1. Sass
2. CSS
2023/05/02

やりたいこと

z-indexを無邪気に指定していると、気が付いたらz-index: 99999みたいにカオスになっていることがある。

そこでSassでどうにかしてz-indexを一括で管理したい。

解決法1

$z-index-list: [
  hoge,
  fuga,
  piyo,
];

@function z-index($name) {
  @return index($z-index-list, $name);
}

@use "xxx" as fn;

.hoge {
  z-index: fn.z-index(hoge); // z-index: 1;
}

.fuga {
  z-index: fn.z-index(fuga); // z-index: 2;
}

.piyo {
  z-index: fn.z-index(piyo); // z-index: 3;
}

配列で管理し、そのインデックスを値とする方法。

インデックスなので重複することが無いかつ要素を単純に羅列すればいいので、記述がシンプルになる。

解決法2

$z-index-map: (
  hoge: 100,
  fuga: 200,
  piyo: 300,
);

@function z-index($name) {
  @return map-get($z-index-map, $name);
}

@use "xxx" as fn;

.hoge {
  z-index: fn.z-index(hoge); // z-index: 100;
}

.fuga {
  z-index: fn.z-index(fuga); // z-index: 200;
}

.piyo {
  z-index: fn.z-index(piyo); // z-index: 300;
}

mapで管理する方法。keyに要素名、valueにz-indexの値を指定する。

解決法1は少しでも順番を変えると全ての値が変わってしまうので、（一応）柔軟に値を変えられる解決法2の方が個人的には好みかも。

参考

Sassを使ったz-indexの管理 - Qiita ↩