Sassを使ったz-indexの管理 改

Sassを使ったz-indexの管理 はめちゃ便利。
でも、mapで並べた時に下の方がz-indexの数値が大きいので、下が上になる。レイヤー構造を逆に考えないといけない。

なので配列を逆にする処理を噛ますことで、上の方が上レイヤーとなり、さらに見やすくできる。

配列を逆に

$z-index:(
  header, //1
  nav, //2
  pulldown, //3 
  child //4
);

//リストを逆転させる
@function list-reverse($map) {
  $result: ();
  @for $i from length($map)*-1 through -1 {
    $result: append($result, nth($map, abs($i)), comma);
  }
  @return $result;
}
$z-index: list-reverse($z-index);

// これでこうなってる
//$z-index:(
//  child, //4
//  pulldown, //3
//  nav, //2 
//  header //1
//);

あとは一緒

上の方がz-indexの数値は高くなるので、変数の順番は逆にする。

$z-index:(
  // ↑レイヤー上
  child,
  pulldown, 
  nav,
  header
  // ↓レイヤー下
);

//リストを逆転させる
@function list-reverse($map) {
  $result: ();
  @for $i from length($map)*-1 through -1 {
    $result: append($result, nth($map, abs($i)), comma);
  }
  @return $result;
}
$z-index: list-reverse($z-index);


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


.child {
  z-index: z(child); // 4
}
.pulldown {
  z-index: z(pulldown); // 3
}
.nav {
  z-index: z(nav); // 2
}
.header {
  z-index: z(header); // 1
}

ガワのレイアウトで使うことしか想定していないので、連想配列とか対応してない。
「改」とか付けちゃったけど、そこは退化。第2階層まで対応はいずれ。。