sass (scss) での z-index 管理

6007 ワード
scss Sass z-index Sass テキストリンク

ちょっと大きめの規模のプロジェクトで 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.