Add z-index tool

[hatzipanis]

@function z($layer) {
    @if not map-has-key($z-layers, $layer) {
        @error "No layer found for `#{$layer}` in $z-layers map.";
    }
    @return map-get($z-layers, $layer);
}

$z-layers: (
    'example'  : 9999,
);

.example {
    z-index: z(example);
}

[hatzipanis]

I also stumbled across the following approach when reading this.

// z-index.scss
$z-index:
    $header,
    $side-nav,
    $chat-window,
    $drop-down-menu,
    $full-screen-modal;
// Usage:
// z-index: index($z-index, nameOfKey);
// sidenav.scss or whatever
.side-nav {
    position: relative;
    z-index: index($z-index, side-nav);
}

That way you don’t have to update all your z-index values when you find something needs to be in between $header and $side-nav. You just rearrange the ordered list and your processed/compiled values will update accordingly. You also get the added benefit of seeing what components are higher than others from a birds eye view.

Thoughts? That article also mentions z-index stacking contexts which I actually never knew existed. Worth a read.