Generated by SassMeister.com.

SassMeister-input-HTML.html

SCSS Managing z-index  

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----


// z-index function
@function z-index($keys...){
  $index: map-deep-get($z-index, $keys...);
  @if type-of($index) == map { $index: map-deep-get($index, default); }
  $index: 1 !default; @return $index;
}

// shorthand
@function z($arglist...){ @return z-index($arglist...); }

// dependency (externalize) 
@function map-deep-get($map, $keys...) {
  @each $key in $keys { $map: map-get($map, $key); }
  @return $map;
}


// Config
$z-index:(
  // default : 0,   // Defined level default  z-index: z(); 
  navigation: 6,
  modal:(
    default:  7,    // Defined level default   z-index: z(modal);
    overlay: 10,
    content: 11
  )
);




// Example 
nav { z-index: z(navigation); }
.modal {
  z-index: z(modal);
  &-overlay { z-index: z(modal, overlay); }
  &-content { z-index: z(modal, content); }
}

// CSS
nav { z-index: 6; }
.modal-overlay { z-index: 10; }
.modal-content { z-index: 11; }

SassMeister-output.css

nav { z-index: 6; }

.modal { z-index: 7; }
.modal-overlay { z-index: 10; }
.modal-content { z-index: 11; }

nav { z-index: 6; }

.modal-overlay { z-index: 10; }

.modal-content { z-index: 11; }

SassMeister-rendered.html

SCSS Managing z-index