Last Updated: February 25, 2016
·
2.987K
· tylr

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
}