A nice little z-index Sass map thing

z-index-map-thing.scss

This may be a little heavy-handed for this project, but here's a map I often use for z-indexes (mostly to keep things agnostic and in context). Values Eric Bailey originally concocted actually!

$z-index: (
  basement: -999999,
  layout: 1000,
  object: 2000,
  component: 3000,
  subcomponent: 3010,
  modal: 4000,
  submodal: 4010,
  ceiling: 999999,
);


And then use this function:

@function get-z-index($index) {
  @return map-get($z-index, $index);
}


In use:

.foo-modal {
  z-index: get-z-index("modal");
}