Skip to content

Instantly share code, notes, and snippets.

Embed
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
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.