Simple Sass Mixin for descending z-index
I wrote this simple SCSS mixin which applies a descending z-index to li elements. Helpful for avatars or things that need to be placed underneath and on top of siblings in order.
@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
}
Written by Tyler Howarth
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#