Přehlednější definice z-index v jazyce SASS

CSS vlastnost z-index určuje prioritu při překrývání HTML elementů. Jedná se vlastně o výšku prvku na ose z. Definice se provádí pomocí celého čísla a čím větší číslo prvek dostane, tím více v popředí se bude nacházet. Ať chceme nebo ne, použití vlastnosti z-index se u větších projektů časem nevyhneme. Asi si dokážete představit, že pokud takových definic budeme mít v kódu více, je rázem těžší udržovat správné pořadí. Nehledě na to, že jakákoliv změna pořadí v budoucnu je poměrně pracná a náchylnější na vznik chyb. V tomto článku bych chtěl ukázat jednoduchý trik, jak lze zkrotit definici z-index v jazyce SASS.

Celé kouzlo spočívá v tom, že všechny výskyty z-index definujeme pouze na jednom místě v kódu. V SASS k tomuto účelu můžeme použít tzv. mapy. Jedná se o asociativní datový typ, který nám dovoluje definovat více hodnot v rámci jedné proměnné. Každá hodnota má svůj unikátní klíč. Například takto:

$colors: (
  primary: #FFBB00,
  secondary: #0969A2,
);

Podobně si uložíme do jedné proměnné všechny hodnoty z-index, které na projektu používáme:

/**
 * Global definitions for all z-indexes on the web
 */

$layer: (
  disabled-element: 20,
  panel: 950,
  form-bubble: 985,
  header-dropdown: 1100,
  page-sidebar: 1200,
  date-range-picker: 1500,
  modal: 2000,
);

Konkrétní hodnotu lze v SASS získat pomocí funkce map-get, které předáme jako parametr právě námi definovanou mapu $layer a požadovaný klíč.

.modal {
  z-index: map-get($layer, modal);
}

Já si celý zápis ještě více zjednodušuji pomocí vhodně definované funkce:

/**
 * Function for better work with z-indexes;
 */

@function layer($name) {
  @if map-has-key($layer, $name) {
    @return map-get($layer, $name);
  }

  @warn "The key '#{$name}' is not in the map '$layer'";
  @return null;
};

Výhodou použítí této funkce je, že si nemusím pamatovat název proměnné, ve které mám uložené hodnoty z-index. V kódu pak použiji pouze jednoduchý zápis:

.modal {
  z-index: layer(modal);
}

Díky tomu, že mám všechny hodnoty uložené na jednom místě, se výrazně zjednoduší a zpřehlední všechny budoucí úpravy. Například takové přečíslování hodnot z-index je rázem velice jednoduchý úkon a není třeba pracně procházet celý kód. Upravíme pouze jednu proměnou.