Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sass mixin for z-index
// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----
/*
* inspired by:
* http://www.smashingmagazine.com/2014/06/12/sassy-z-index-management-for-complex-layouts/
*/
$z: (
base:
project-covers
user-tooltip
sorting-bar
modals
navigation
,
modals:
fields
form-controls
errors
autocomplete-dropdown
);
@function single($x) {
@return length($x) == 1;
}
@function first($x) {
@return nth($x, 1);
}
@function last($x) {
@return nth($x, length($x));
}
@mixin z-index($component) {
$layer: if(single($component), base, first($component));
z-index: index(map-get($z, $layer), last($component));
}
#nav {
@include z-index(navigation);
}
#modal {
@include z-index(modals);
}
#modal__error {
@include z-index(modals form-controls);
}
/*
* inspired by:
* http://www.smashingmagazine.com/2014/06/12/sassy-z-index-management-for-complex-layouts/
*/
#nav {
z-index: 5;
}
#modal {
z-index: 4;
}
#modal__error {
z-index: 2;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment