Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.5)
// Compass (v1.0.0.alpha.18)
// ----

$zIndex: (
	scroller: 100,
	dropdown: 200,
	absolute: 300,
	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, 1);
  }
}
nav {
  
  @media (max-width: 767px) {
    position: fixed;
    z-index: z(fixed);
  }
}
.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: z(modal);
}

SassMeister-output.css

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

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

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