Есть ли плагин для grunt \ gulp для автоматического управления z-index?

Question

[Алексей Николаев]

Доброго дня.
Есть ли плагин, который позволяет автоматически управлять глубиной элемента? Например, вместо стандартного:

.selector {
    z-index: 1000;
    z-index: $depth-selector-base; // как вариант
}

можно было бы писать что-то вроде:

.selector {
    z-index: above(.selector-2);
    z-index: below(.selector-3);
    z-index: between(.selector-2, .selector-3);

В гугле не нашел ничего подобного. Везде самое большее - советы про sass, переменные, вот это вот все, а автоматизации нет. Было бы круто забыть про необходимость помнить глубины элементов, и встраиваться между ними, если нужно что-то добавить.

Заранее спасибо!

Comments

[Danila]

отличная идея для реализации postcss плагина

[Алексей Николаев]

Данила: если сделаете, отпишитесь)

Answer 1

[index0h]

less

Comments

[Алексей Николаев]

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

[Алексей Николаев]

Чтобы в less \ sass работало то, что я ищу, нужно, чтобы была функция, позволяющая вытягивать какое-либо свойство из селектора в переменную. Хотя бы. Но такого там нет.

[index0h]

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

[Алексей Николаев]

index0h: но смотрите: в обычном проекте среднего размера true-way, как правило, представлен десятком переменных в variables.scss. В каждой переменной - глубина определенного элемента, например, $depth-modal: 1000, $depth-main-menu: 100, и так далее. Чем больше проект, тем больше этих переменных, приходится беспокоиться о том, как бы не нарушить порядок, если нужно встроить новый элемент между ними. Это некрасиво, и это геморрой, и в целом у меня данный подход не вызывает энтузиазма.

В описанной мной концепции работа с глубинами не потребует усилий от разработчика. Ни одной переменной. Просто функции, которые при компиляции будут генерировать нужные значения. Разработчик просто единожды укажет, ниже какого слоя должен располагаться данный элемент, и все, можно забыть об этом. Даже если появится еще несколько слоев, при компиляции значения будут перерассчитаны. Например.

.selector { // ... }
.selector2 {
    z-index: above(.selector); // тут будет 1, т.к. у .selector z-index по умолчанию auto, что можео расценить как 0
}

Как-то не верится, что такого не существует, наверняка есть минимум одно решение с хитроумными названиями. В 6000+ плагинов-то...

[index0h]

https://gist.github.com/gerbenvandijk/f1c75dab5b1e...
https://css-tricks.com/handling-z-index/

[Алексей Николаев]

index0h: первое решение довольно интересное, спасибо.