Z-index stacking partial

SassMeister-output.css

header .heroImage {
  background: url("/images/hero.jpg") no-repeat 0 0;
  position: absolute;
  z-index: 3000;
}

header .siteLogo {
  position: absolute;
  z-index: 3100;
}

@media (max-width: 767px) {
  nav {
    position: fixed;
    z-index: 4000;
  }
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5000;
}

z_index_partial.scss

// ----
// libsass (v3.2.5)
// ----

$zIndex: (
	scroller: 1000,
	dropdown: 2000,
	absolute: 3000,
	fixed: 4000,
	modal: 5000
);

// Set the z-index based on default values from a list map, $zIndex
//
// $type - the key from the $zIndex list map
// $offset - number to adjust the default $zIndex value [positive|negative]
//
// use $offset to alter the default value of the z-index type
// this can be used to stack multiple versions of the same type 
// when they don't appear in the markup in the correct order.
@function z($type, $offset: 0) {
  $indexValue: map-get($zIndex, $type);
  @return $indexValue + $offset;
}

//***** Example CSS *****//
header {
  
  .heroImage {
    background: url("/images/hero.jpg") no-repeat 0 0;
    position: absolute;
    z-index: z(absolute);
  }
  .siteLogo {
    position: absolute;
    z-index: z(absolute, 100);
  }
}
nav {
  
  @media (max-width: 767px) {
    position: fixed;
    z-index: z(fixed);
  }
}
.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: z(modal);
}

z_index_partial_output.css

header .heroImage {
  background: url("/images/hero.jpg") no-repeat 0 0;
  position: absolute;
  z-index: 3000;
}
header .siteLogo {
  position: absolute;
  z-index: 3100;
}

@media (max-width: 767px) {
  nav {
    position: fixed;
    z-index: 4000;
  }
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5000;
}