_z-index

z-index 値を自動的に算出します。

引数型初期値説明
_z-index($keys...);
$keysListキーの配列

Map型で管理

ライブラリを読み込む前に定義することに注意が必要です。

// tatamiを読み込む前に定義する
$_z-indexes: (
  header,
  main,
  footer
);

@import '~@takamoso/tatami';

.header {
  z-index: _z-index(header);
}
.main {
  z-index: _z-index(main);
}
.footer {
  z-index: _z-index(footer);
}

.header {
  z-index: 1;
}
.main {
  z-index: 2;
}
.footer {
  z-index: 3;
}

逆順で出力

$_z-index-reverse 変数に true を指定すると、逆順で出力されます。

$_z-indexes: (
  header,
  main,
  footer
);
$_z-index-reverse: true;

@import '~@takamoso/tatami';

.header {
  z-index: _z-index(header);
}
.main {
  z-index: _z-index(main);
}
.footer {
  z-index: _z-index(footer);
}

.header {
  z-index: 3;
}
.main {
  z-index: 2;
}
.footer {
  z-index: 1;
}

ネストにも対応

ネストする際に、下階層がない場合は空配列 () を指定しておきます。

$_z-indexes: (
  header: (),
  main: (
    aside,
    left,
    right 
  ),
  footer: ()
);

@import '~@takamoso/tatami';

.main .left {
  z-index: _z-index(main, left);
}
.main .right {
  z-index: _z-index(main, right);
}

.main .left {
  z-index: 2;
}
.main .right {
  z-index: 3;
}