Recursive z-index management

_usage.scss

$z-indexes: (
    main: (
        above-inherit: (),
        nested: (
            low,
            middle,
            high
        ),
        tooltip: ()
    ),
    header: (),
    toaster: ()
);

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

.nested {
    z-index: z(main, nested);
}

.high {
    z-index: z(main, nested, high);
}

_z-index.scss

@function z-index($keys) {
    $map: $z-indexes;
    $found-index: null;

    @each $key in $keys {
        @if (type-of($map) == "map") {
            $found-index: index(map-keys($map), $key);
            $map: map-get($map, $key);
        }
        @else {
            $found-index: index($map, $key);
        }
    }

    @return $found-index;
}

@function z($keys...) {
    @return z-index($keys);
}

Please see the original medium post: https://medium.com/alistapart/sassier-z-index-management-for-complex-layouts-4540717a9488