Generated by SassMeister.com.

SassMeister-input.scss

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

// A clean way to deal with z-index layers in Sass
// Based on http://css-tricks.com/handling-z-index/
// ---

// A map of z layers
// All z-index values should be set there
// ---
$z-layers: (
  'modal':          5000,
  'dropdown':       4000,
  'default':        1,
  'bottomless-pit': -10000
);

// A function helper to avoid having to type `map-get($z-layers, ...)`
// ---
// @param [string] $component (default): the layer to use
// ---
// @return [number] | null
// ---
@function z($layer: 'default') {
  @if map-has-key($z-layers, $layer) {
    @return map-get($z-layers, $layer);
  }
  
  @warn "No z-index found in $z-layers map for `#{$layer}`. Property omitted.";
  @return null;
}

// Examples & demo
// ---

// Modal
.modal {
  z-index: z(modal);
}

// ... and its backdrop
// Computed z-index based on the one from modal
.modal-backdrop {
  z-index: (z(modal) - 1);
}

// Dropdown
.dropdown {
  z-index: z(dropdown);
}

// A pseudo-element that has to be on top
// Computed z-index based on the default one
.element:after {
  z-index: (z() + 1);
}

// A component that has to be veryyyy low
.im-falling {
  z-index: z(bottomless-pit);
}

// Calling an unknown layer
// will omit the z-index property
.error {
  z-index: z(unknown-z-index);
}

SassMeister-output.css

.modal {
  z-index: 5000;
}

.modal-backdrop {
  z-index: 4999;
}

.dropdown {
  z-index: 4000;
}

.element:after {
  z-index: 2;
}

.im-falling {
  z-index: -10000;
}