Skip to content

Instantly share code, notes, and snippets.

@tylerhowarth
Last active December 24, 2015 00:49
Show Gist options
  • Save tylerhowarth/6719050 to your computer and use it in GitHub Desktop.
Save tylerhowarth/6719050 to your computer and use it in GitHub Desktop.
Simple SCSS mixin which applies a descending z-index to li elements.
@mixin descending-z-index($count: 30){
// @include on UL class
position: relative;
li{
position: relative;
$target: 0;
$index: $count;
@while $index > 0 {
&:nth-child(#{$target}){ z-index: #{$index}; }
$target: $target + 1;
$index: $index - 1;
}
}
}
//Some ul class
.listclass{
@include descending-z-index;
//other styles here
}
.anotherulclass{
@include descending-z-index(100);
//this will give you 100 child selectors with descending z-indexes
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment