Created
July 11, 2012 13:13
-
-
Save stubotnik/3090324 to your computer and use it in GitHub Desktop.
Manage complex z-index layouts with SASS variables
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$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; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.