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');
}