Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
A way of managing z-index values to keep them from getting out of control
// 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.
z-index: layer(); // default base layer
z-index: layer( local-hero );
@function layer( $class: foreground ){
@return map-get( $layers, $class );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment