Менее немедленный родительский селектор

Ответ 1

Базовый пример

Отчасти это зависит от того, как вы структурируете свой код LESS. В настоящее время нет способа сделать это с нормальной вложенной структурой. Однако, возьмите следующий пример, где .grandchild является нашей конечной целью во всех случаях (это должен быть самый внешний уровень - я назвал эту конечную целевую группу в предыдущем ответе, прежде чем LESS добавила документацию об использовании & в качестве родительского селектора):

МЕНЬШЕ

.grandchild {
  grandchild: 1;
  .child & {
    child: 1;
    .parent & {
      parent: 1;
      .grandparent & {
        grandparent: 1;

      }
    }
  }
}

Выход CSS

.grandchild  {
  grandchild: 1;
}
.child .grandchild  {
  child: 1;
}
.parent .child .grandchild  {
  parent: 1;
}
.grandparent .parent .child .grandchild  {
  grandparent: 1;
}

Как вы можете видеть, любой код, вложенный в первый уровень, имеет только конечную цель .grandchild в своей селекторной строке. Каждый уровень один идет "вниз" в гнезде, на самом деле происходит "вверх" в специфике селектора. Поэтому, чтобы направить только "непосредственный родитель" для селекторной строки, поместите его в .child этого примера.

Hovers Still Work

МЕНЬШЕ

.grandchild {
  grandchild: 1;
  &:hover {
    grandchildhover: 1;
  }
  .child & {
    child: 1;
    .parent & {
      parent: 1;
      .grandparent & {
        grandparent: 1;
        &:hover {
          grandchildhover: 1;
        }
      }
    }
  }
}

Это добавит к вышеуказанным css следующие два выхода:

.grandchild:hover {
  grandchildhover: 1;
}

.grandparent .parent .child .grandchild:hover {
  grandchildhover: 1;
}

Пропустить поколения

Вы можете запрограммировать его, чтобы пропустить несколько поколений, например:

МЕНЬШЕ

.grandchild {
  grandchildonly: 1;
  .child & {
    withchild: 1;
    .parent & {
      withparentchild: 1;
    }
  }
  .parent & {
    skipgenchild: 1;
  }
}

Выход CSS

.grandchild {
  grandchildonly: 1;
}
.child .grandchild {
  withchild: 1;
}
.parent .child .grandchild {
  withparentchild: 1;
}
.parent .grandchild {
  skipgenchild: 1;
}

отведенной

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

.addParent(@parent) { 
  @parentescaped: e(@parent); 
  @{parentescaped} & {.setWithParentProps(@parent);}
}

.grandchild {
  grandchild: 1;
  &:hover {
    grandchildhover: 1;
  }
  .addParent('.child');
  .setWithParentProps('.child'){
    child: 1;
    .addParent('.parent');
  }
  .setWithParentProps('.parent'){
    parent: 1;
    .addParent('.grandparent');
  }
  .setWithParentProps('.grandparent'){
    grandparent: 1;
    &:hover {
      morespecifichover: 1;
    }
  }
}

Заключительные комментарии

Как указано в его комментарии в виде семифаз-max, говорится о добавлении точности поколений в нормальный вложенный контекст. Приведенное здесь решение требует, чтобы кто-то считал "противоположностью" гнездования, а скорее думал только о целевом элементе. Таким образом, способ добавления .grandchild в другой селектор не будет mixin:

МЕНЬШЕ (ожидание добавления родителя путем нормального вложенности)

.another-generational-parent {
  .grandchild;
}

Выход CSS

.another-generational-parent {
  grandchildonly: 1;
}
.child .another-generational-parent {
  withchild: 1;
}
.parent .child .another-generational-parent {
  withparentchild: 1;
}

Лучше всего добавить его в исходный код в соответствии с нужным местом, но если это невозможно, то потребуется некоторое повторение (если вы не настроили какой-то способ в исходном коде для "вставки" родителей с помощью творческого mixin call - у меня нет времени, чтобы поверить в это здесь).

.parent .child .grandchild {
  .another-generational-parent & {
     another-generational-parent: 1;
  }
}

Может ли такое противоположное кодирование быть полезным или не все зависит от одной цели и желания при организации кода LESS.