Help us understand the problem. What is going on with this article?

Sassを使ったz-indexの管理

More than 3 years have passed since last update.

Sass(SCSS)を使ったz-indexの管理には、Sassy Z-Index Management For Complex Layouts – Smashing Magazine を使っていた。

$z: header, nav, pulldown, child;

.header {
  z-index: index($z, header); // 1
}
.child {
  z-index: index($z, child); // 4
}

ただ変数にリストを突っ込んでいくと、数が多くなった時に可読性が悪く、つらい。

$z: header, nav, pulldown, child, hoge, hoge, hoge, hoge, ...;

可読性を上げて管理

カッコで囲むことで可読性が良くなり、z-indexの上下関係がわかりやすくなる。

$z-map: (
  header, 
  nav,
  pulldown, 
  child
);

下記のようなz関数のようなものを用意して使えば、z-indexの管理が楽になると思う。

$z-map: (
  header, 
  nav,
  pulldown, 
  child
);

// z-index
@function z($name) {
  @return index($z-map, $name);
}
// @debug z(header); // 1

.header {
  z-index: z(header); // 1
}
.child {
  z-index: z(child); // 4
}

追記 2016-05-18

この状態だとスタック文脈の問題もあるので、改良した。
第2階層まで対応。

$z-map: (
  header: true,
  nav: true,
  child: (
    foo,
    bar
  )
);

// z-index
@function z($name, $childname: 0) {
  $getkey: map-get($z-map, $name);
  @if $childname != 0 {
    @return index($getkey, $childname);
  }
  @return inspect(index($z-map, ($name $getkey) ));
}

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

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

.child-foo {
  z-index: z(child, bar); // 2
}

libsass対応

@function z($name, $childname: 0) {
  $getkey: map-get($z-map, $name);
  $counter: 1;
  $is-index: 0;
  @if $childname != 0 {
    @return index($getkey, $childname);
  }

  @each $map-key, $map-value in $z-map {
    @if $map-key == $name {
      $is-index: $counter;
    }
    $counter: $counter + 1;
  }

  @return $is-index;
}

追記: 2017-03-28

スタック文脈による第2階層以上に対応。
ついでに逆順指定もできるようにした。
MixinsとFunctions集にまとめたので、そのまま使っても、抜き出して使っても可。
そのまま使う場合は、coreディレクトリの中を、任意のSassディレクトリに移動して使う。

kojika17/fawn

$z-map: (
  header: true,
  nav: true,
  child: (
    foo: true,
    bar: (
     hoge: true,
     fuga: true,
     hohoho: true
    )
  )
);

@import 'fawn'; // $z-mapの後に読み込む

.header {
  z-index: z(header); // 1
}
.child {
  z-index: z(child); // 3
}
.child-foo {
  z-index: z(child, bar, hohoho); // 3
}

逆順にしたいときは、$z-map-reverse変数の値をtrueにする。

$z-map: (
  header: true,
  nav: true,
  child: (
    foo: true,
    bar: (
     hoge: true,
     fuga: true,
     hohoho: true
    )
  )
);
$z-map-reverse: true;
@import 'fawn'; // $z-mapと$z-map-reverseの後に読み込む

.header {
  z-index: z(header); // 3
}
.child {
  z-index: z(child); // 1
}
.child-foo {
  z-index: z(child, bar, hohoho); // 1
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away