LoginSignup
0
0

More than 3 years have passed since last update.

sass (scss) での z-index 管理

Last updated at Posted at 2021-03-08

ちょっと大きめの規模のプロジェクトで z-index の管理が必要になったので、簡易的に管理するためにつくったものです。
既存ライブラリの z-index もあわせて管理する必要があったので、マップにそれも書き込みつつ運用します。マップに該当のキーがない場合は、getNextHighestZIndex 関数で次の最上位の z-index を取得してマップに書き込むようにしてみたものの、あまり使いませんでした。

manager.scss
@use 'sass:list';
@use 'sass:map';

//管理用のマップ(例)
$z-index-order: (
    header: 1,
    button: 2,
    lib-modal: 100, //ライブラリのz-index
    offcanvas: 101,
    modal: 102,
);
$last-z-index: null;

@function getZIndex($key:null) {
    $has: map.has-key($z-index-order, $key);
    @if $has {
        @return map.get($z-index-order, $key);
    }
    @else {
        $nhz: getNextHighestZIndex();
        $m: map.set($z-index-order, $key, $nhz);
        @return $nhz;
    }
}

@function getNextHighestZIndex() {
    $z-index: 0;
    @each $key, $idx in $z-index-order {
        @if $idx > $z-index {
            $z-index: $idx;
        }
    }
    $last-z-index: $z-index + 1;
    @debug "last-z-index:#{$last-z-index}";
    @return $last-z-index;
}
sample.scss
@use "./path/to/manager";

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: manager.getZIndex(modal);
}

使用例

See the Pen SCSS: z-index management by 1cco (@1cco) on CodePen.

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0