benjamincharity
5/29/2017 - 4:44 PM

Determine z-index based off of a list. This allows new items to be added without needing a refactor.

Determine z-index based off of a list. This allows new items to be added without needing a refactor.

$z-layers: (
    "header",
    "menu",
    "menu-trigger",
);

/////////////////////////////////////////////
//
// Determine the correct z-index
//
@function z($name) {
    @if index($z-layers, $name) {
        @return (length($z-layers) - index($z-layers, $name)) + 1;
    } @else {
        @warn 'There is no item "#{$name}" in this list; choose one of: #{$z-layers}';
        @return null;
    }
}

// Use
.foo {
  z-index: z('header');
}