SCSS z-index
Did you ever do a "z-index: 999;"? If so you might need something like this...
Rather than typing the z-index value in your classes simply make a reference to a centralized list or map and take control of all your elements in one place.
Value based
If you prefer defining each z-index individually define your z-layers as a map.
//
// Value based (map)
//
$z-layers: (
'wallpaper' : 0
, 'page-content' : 1
, 'page-footer' : 2
, 'page-header' : 2
, 'page-navigation' : 3
, 'modal-window' : 4
);
// Use it
.class { z-index: z('modal-window'); } // => z-index: 4
.class { @include z('modal-window'); } // => z-index: 4
Index based
If you don't care about specific z-index values – define your z-layers as a list. When requested the index is returned – making the first item the lowest.
//
// Index based (top is lower)
//
$z-layers: (
'wallpaper'
, 'page-content'
, 'page-footer'
, 'page-header'
, 'page-navigation'
, 'modal-window'
);
// Use it
.class { z-index: z('modal-window'); } // => z-index: 6
.class { @include z('modal-window'); } // => z-index: 6
Function and Mixin
//
// Function and mixin to return the z-index
// from $z-layers
//
@function z-index($name){
$z: null;
@if type-of($z-layers) == map { $z: map-get($z-layers, $name); }
@if type-of($z-layers) == list {
@for $i from 1 through length($z-layers) {
@if nth($z-layers, $i) == $name { $z: $i; }
}
}
@if $z { @return $z; }
@else { @error('Could not find a z-index for `#{$name}`'); }
}
@mixin z-index($name){ z-index: z-index($name); }
// Short hands – if you are lazy ;-)
@function z($arglist...){ @return z-index($arglist...); }
@mixin z($arglist...){ @include z-index($arglist...); }