Z-Indexe in SASS

Wer kennt es nicht: Ein großes Projekt und jede menge Elemente, die auf einen Z-Index angewiesen sind. Hier können schnell unerwartete Probleme auftreten. Um das zu vermeiden, möchte ich hier erläutern, wie ich in meinen Projekten die Z-Indexe pflege.

/* _z-indexes.scss */
$z-indexes: (
  toast: 10,
  slider: 20,
  dropdown: 30,
  modal: 40
);

/* _modal.scss */
@import 'z-indexes';
$modal-z-index: map-get($z-indexes, modal);

.modal {
  &__content {
    z-index: $modal-z-index;
  }
  &__background {
    z-index: $modal-z-index - 1;
  }
}

Ich lege in der Datei _z-indexes.scss eine Map an. Diese beinhaltet alle vorhandenen Elemente, die einen Z-Index erhalten sollen. Die Zehnerschritte ermöglichen es, später weitere Ebenen in die Liste hinzuzufügen.

In _modals.scss, greife ich dann auf die Map zu und lagere den Wert in eine lokale Variable aus.