Simple way to manage z-index with Stylus

z-index.styl

/*
  This is an easy way (at least for me) to manage z-index using Stylus.
  Using 'hashes' :   http://learnboost.github.io/stylus/docs/hashes.html
*/

// Step 1 - Setup a hash in your variables 
// I like to name my keys the exact same thing as the element class/id
// from, here I can see the order of my z-indexes and I can move them around easily

zarray = {
  '.big-text'  : 6,
  '.imgTab'    : 4,
  '.container' : 3,
  '.img1'      : 3,
  '.img2'      : 2,
  '.img3'      : 1,
  '.topBG'     : 2,
  '.btmBG'     : 1,
  '#etc'       : 3
}

// Step 2  - Add the extremely simple mixin
// I don't do any checking because I want it to error out on compile if I forgot something
zindex(elem)
  z-index zarray[elem]
  
// Step 3 - Use it!
.container
  zindex('.container')