次直接父选择器

Question

Less 允许选择父选择器 (http://lesscss.org/features/#parent-selectors-feature)

如何获得直接父选择器，而不是根父选择器？

Answer 1

基本示例

这部分取决于您如何构建 LESS 代码。 目前没有办法用普通的嵌套结构做到这一点。但是，以下面的例子为例，.grandchild 在所有情况下都是我们的最终目标（它必须是最外层--I在 LESS 添加有关使用 & 作为父选择器的文档之前，在先前的答案中将此称为“end target grouping”）：

少

.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 代码时的目标和愿望。