较少的直接父选择器

Question

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

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

Answer 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此示例中.

徘徊仍在工作

减

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

最后评论

由于在他的评论中链接了七个阶段的最大值,因此有人提到在正常的嵌套上下文中添加世代精度.这里给出的解决方案要求人们思考嵌套的"相反",而只考虑被定位的元素.因此,添加.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调用"插入"父母 - - 我没有时间虔诚于此.

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

这种相反的编码是否有用都取决于一个人在组织LESS代码时的目标和愿望.