Manage complex z-index layouts with SASS variables

z-indexes.scss

$pages-z-index: 1;

$menu-z-index: $pages-z-index - 1;

$betcard-mask-z-index: $pages-z-index + 1;
$betcard-z-index: $betcard-mask-z-index + 1;
$header-z-index: $betcard-z-index + 1;
$alert-dialog-z-index: $header-z-index + 1;
$betcard-delay-z-index: $alert-dialog-z-index + 1;
$ajax-blocker-z-index: $betcard-delay-z-index;

$loading-screen-z-index: $ajax-blocker-z-index + 1;
$no-js-dialog-z-index: $loading-screen-z-index + 1;

$live-betting-tab-z-index: $pages-z-index;
$live-betting-active-tab-z-index: $live-betting-tab-z-index + 1;

Had this same idea and came up with a slightly more maintainable solution. Did some googleing and this is the only reference to something similar I have found so I thought I'd share.

I create a list

$list : ('#element1', '#element2', '#element3');

then loop through them all and print out the indexs

$i : 1;
@each $element in $list {
#{$element} {
z-index : #{$i};
}
$i : $i + 1;
}

Benefit is to add a new item you just insert it into the correct position in the list.

Could probably be expanded to deal with nested lists (not sure if sass supports that) to deal with sub section indexs.