Skip to content

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' :
// 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
z-index zarray[elem]
// Step 3 - Use it!
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.