Skip to content

Useful Sass Functions

Z-Index

TIP

z-index helper: so you'll never have a "z-index: 99999999;" headache again.

  • Usage: z-index: z('site-header'); or via mixin: @include z-index("modal")
sass
$z-index: (
        alwaysOnTop : 99999,
        tooltip : 9999,
        insideModal : 3000,
        modal : 2000,
        backdrop : 1500,
        navigation : 100,
        trigger : 100,
        footer : 90,
        site-header : 60,
        page-clickable : 41,
        bg-image : 40,
        zero : 0,
        negative: -100
);

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