Лучшее решение для управления z-index с помощью Sass

Играя с новой игрушкой

Теперь, когда мы закончили строить нашу функцию, пришло время поиграть с ней! Как вы видели в начале этой статьи, использовать функцию довольно просто:

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

.modal-overlay {
  // ...
  z-index: z("modal") - 1;
}

Идея состоит в том, чтобы всегда использовать эту функцию при определении значений z-index Использование его только часть времени не имеет смысла и в значительной степени убивает систему.

Кроме того, я думаю, что лучше держать карту слоя максимально светлой. Чем больше слоев вы добавляете, тем больше сложность Z-шкалы. Попробуйте найти пару повторяющихся значений, сопоставить их с общими ключевыми словами, и вам будет хорошо.

Продвигая вещи дальше с помощью вложенных контекстов

Вы, вероятно, не без знания, что значения z-index Все они связаны с их собственным стековым контекстом. Это в основном означает, что если вы попытаетесь заставить элемент из Context-A появиться поверх элемента из Context-B, но Context-B будет нарисован поверх Context-A, то даже индекс более девяти тысяч не будет довольно.

Примечание. Для получения дополнительной информации о контекстах стека и z-indexэту потрясающую статью Филиппа Уолтона.

Теперь, если мы хотим, чтобы наша система знала контексты стекирования, мы могли бы иметь вложенные карты. Например, если наш modal

 $z-layers: (
  "goku":            9001, 
  "shoryuken":       8000,
  "modal": (
    "base":           500,
    "close":          100,
    "header":          50,
    "footer":          10
  ),
  "default":            1,
  "below":             -1,
  "bottomless-pit": -9000
);

Проблема в том, что мы не можем легко получить значение из вложенных карт, ни в коем случае не используя map-get К счастью, создать такую ​​функцию легко:

 @function map-deep-get($map, $keys...) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }

  @return $map;
}

Достаточно. Просто, не правда ли? Теперь мы можем написать наш модальный модуль так:

 // New stacking context
.modal {  
  position: absolute;
  z-index: z("modal", "base");

  .close-button {
    z-index: z("modal", "close");
  }

  header {
    z-index: z("modal", "header");
  }

  footer {
    z-index: z("modal", "footer");
  }
}

Что даст следующий результат:

 .modal {
  position: absolute;
  z-index: 500;
}

/* This is `100` in the modal stacking context */
.modal .close-button {
  z-index: 100;
}

/* This is `50` in the modal stacking context */
.modal header {
  z-index: 50;
}

/* This is `10` in the modal stacking context */
.modal footer {
  z-index: 10;
}

В будущем!

Когда-нибудь в светлое будущее, о котором мы все мечтаем, у нас будут собственные переменные CSS. Тогда нам все это больше не нужно. Вместо этого вот что произойдет:

 :root {
  --z-goku:            9001;
  --z-shoryuken:       8000; 
  --z-modal:            500;
  --z-default:            1;
  --z-below:             -1;
  --z-bottomless-pit: -9000;
}

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

Видеть? Практически то же самое, за исключением того, что это var()z()--keykey Немного больше времени для ввода и, возможно, немного более хаотично, поскольку это отдельные переменные, а не карта. Но он хорошо справляется с работой, сохраняя при этом нативность.

Последние мысли

Я не знаю как вы, но я думаю, что это прекрасный метод для обработки z-index Мало того, что все организовано с каждым z-индексом, хранящимся в карте слоев, но также довольно легко иметь небольшие вариации с операторами, как мы видели в нашем последнем примере.

Вот и все. Вот демоверсия Sassmeister, чтобы вы начали. Нет причин не применять это в ваших проектах, начиная с сегодняшнего дня.