Smart z-index management with SASS

function.scss

@function z($list, $element) {

   $z-index: index($list, $element);

   @if $z-index {
      @return $z-index;
   }

   @warn 'There is no item "#{$element}" in this list; choose one of: #{$list}';
   @return null;
}  

main.css

.covers {
  z-index: 1;
}

.tooltip {
  z-index: 2;
}

.sorting-bar {
  z-index: 3;
}

.modals {
  z-index: 4;
}

.navigation {
  z-index: 5;
}

.covers-inherit {
  z-index: 1;
}

.modals-inherit {
  z-index: 4;
}

main.scss

// # Usage 

// ## Stack order declaration  
$elements: covers, tooltip, sorting-bar, modals, navigation;

// ## Automatic generation
@each $element in $elements {
 .#{$element} {
   z-index: z($elements, $element);
  }
}


// ## Application to elements
.covers-inherit {
 z-index: z($elements, covers); // .project-covers {z-index: 1; }
}


.modals-inherit {
 z-index: z($elements, modals); // .project-covers {z-index: 4; }
}

Sources.md

Source : Smashing Mag