这部分取决于您如何构建您的LESS代码。目前没有办法使用正常的嵌套结构。但是，请参考以下示例：在所有情况下，.grandchild都是我们的最终目标(它必须是最外层的 – 在之前的答案中我称之为“end target grouping”，而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中。

休息仍然工作

减

.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;
    }
  }
}

最终评论

在他的评论，there is talk of adding generational precision within a normal nested context中有七个阶段的最大联系。这里给出的解决方案需要一个人认为“嵌套”是相反的，而只是考虑到目标元素。所以将.grandchild添加到另一个选择器的方式不会是这个mixin：

LESS(希望通过正常嵌套添加父项)

.another-generational-parent {
  .grandchild;
}

CSS输出

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

最好根据适当的位置将其添加到原始代码中，但如果不可行，则需要重复一些(除非您在原始代码中设置了一些方法以通过创意mixin调用“插入”父母) – 我没有时间虔诚到这里)。

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

无论这种相反的编码是否有用，都取决于组织LESS代码的目标和愿望。