Sass mixin for z-index

SassMeister-input.scss

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----

/*
 * inspired by:
 * http://www.smashingmagazine.com/2014/06/12/sassy-z-index-management-for-complex-layouts/
 */
$z: (
  base:
    project-covers
    user-tooltip
    sorting-bar
    modals
    navigation
  ,
  modals:
    fields
    form-controls
    errors
    autocomplete-dropdown
);

@function single($x) {
  @return length($x) == 1;
}

@function first($x) {
  @return nth($x, 1);
}

@function last($x) {
  @return nth($x, length($x));
}

@mixin z-index($component) {
  $layer: if(single($component), base, first($component));
  z-index: index(map-get($z, $layer), last($component));
}

#nav {
  @include z-index(navigation);
}

#modal {
  @include z-index(modals);
}

#modal__error {
  @include z-index(modals form-controls);
}

SassMeister-output.css

/*
 * inspired by:
 * http://www.smashingmagazine.com/2014/06/12/sassy-z-index-management-for-complex-layouts/
 */
#nav {
  z-index: 5;
}

#modal {
  z-index: 4;
}

#modal__error {
  z-index: 2;
}