Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Simple way to manage z-index with Stylus
/*
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')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment