Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Recursive z-index managment
$z-indexes: (
main: (
above-inherit: (),
nested: (
low,
middle,
high
),
tooltip: ()
),
header: (),
toaster: ()
);
.main {
z-index: z(main);
}
.nested {
z-index: z(main, nested);
}
.high {
z-index: z(main, nested, high);
}
@function z-index($keys) {
$map: $z-indexes;
$found-index: null;
@each $key in $keys {
@if (type-of($map) == "map") {
$found-index: index(map-keys($map), $key);
$map: map-get($map, $key);
}
@else {
$found-index: index($map, $key);
}
}
@return $found-index;
}
@function z($keys...) {
@return z-index($keys);
}
@fredconv

This comment has been minimized.

Copy link

@fredconv fredconv commented Jul 18, 2016

Hi

Nice function
but one small missing thing:

@function z($keys...) { @return z-index($keys); }

instead of

@function z($keys) { @return z-index($keys); }

@superfine

This comment has been minimized.

Copy link

@superfine superfine commented Jan 8, 2018

Hi, I'm gonna use this now, please correct "managment" to "management" :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment