A way of managing z-index values to keep them from getting out of control

layers.scss

// Define a map of z-index layers. Utilized by layer()
$layers: (
	foreground: 1,
	local-hero: 2,
	local-superhero: 3,
	global-hero: 4,
	global-superhero: 5,
);

/*
OPTIONAL: I prefer to wrap the map-get call in a function to make my SCSS more self-documenting and to allow for enhancements in the future.

Usage:
	z-index: layer(); // default base layer
	z-index: layer( local-hero );
*/
@function layer( $class: foreground ){
	@return map-get( $layers, $class );
}