Less即时父选择器 [英] Less Immediate Parent Selector
问题描述
较少允许选择父级选择器（ http://lesscss.org/features/#parent-selectors-功能）
如何获得直接父选择器，而不是根父选择器？
A基础示例
它部分取决于你如何构造你的LESS代码。 目前没有办法使用正常的嵌套结构。但是，以下示例中的 .grandchild 是我们的最终目标所有情况（它必须是最外层 - 我称之为 c>作为父选择器）之前添加了关于使用& 作为父选择器的文档的前一个答案中的结束目标分组：
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 中。
< h2> Hovers仍在工作
LESS
.grandchild {
grandchild：1;
&：hover {
grandchildhover：1;
}
.child& {
child：1;
.parent& {
parent：1;
.grandparent& {
grandparent：1;
&：hover {
grandchildhover：1;
}
}
}
}
}
$ b b
这将添加上面的css这两个输出：
.grandchild：hover {
grandchildhover： 1;
}
.grandparent .parent .child .grandchild：hover {
grandchildhover：1;
}
跳过世代
您可以将其编码以跳过几代人，例如：
LESS
.grandchild {
grandchildonly：1;
.child& {
withchild：1;
.parent& {
withparentchild：1;
}
}
.parent& {
skipgenchild：1;
}
}
CSS输出 p>
.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：
LESS（希望通过正常嵌套添加父级）
.another-generation- parent-parent {
.grandchild;
}
CSS输出
.another-generation-父母{
grandchildonly：1;
}
.child .another-generation- parent-parent {
withchild：1;
}
.parent .child .another-generation- parent-parent {
withparentchild：1;
}
最好根据正确的地方将其添加到原始代码中，但是如果这是不可能的，那么需要一些重复（除非你在原始代码中设置一些方式，通过创造性的mixin调用插入父母 - 我没有时间在这里讨论）。
.parent .child .grandchild {
.otherother-generation- {
another-generation-parent：1;
}
}
这种相反的编码是否有用根据目标和愿望组织LESS代码。
Less allows one to select the parent selector (http://lesscss.org/features/#parent-selectors-feature)
How does one get the immediate parent selector, not the root parent selector?
A Base Example
It partly depends upon how you structure your LESS code. There is currently no way to do this with a normal nested structure. However, take the following example, where the .grandchild is our final target in all cases (it must be the outermost level--I called this "end target grouping" in a previous answer before LESS added documentation about using & as a parent selector):
LESS
.grandchild {
grandchild: 1;
.child & {
child: 1;
.parent & {
parent: 1;
.grandparent & {
grandparent: 1;
}
}
}
}
CSS Output
.grandchild {
grandchild: 1;
}
.child .grandchild {
child: 1;
}
.parent .child .grandchild {
parent: 1;
}
.grandparent .parent .child .grandchild {
grandparent: 1;
}
As you can see, any code nested in the first level only has the end target of .grandchild in its selector string. Each level one goes "down" in the nest, one is actually going "up" in selector specificity. So to target just the "immediate parent" for the selector string, place it in the .child of this example.
Hovers Still Work
LESS
.grandchild {
grandchild: 1;
&:hover {
grandchildhover: 1;
}
.child & {
child: 1;
.parent & {
parent: 1;
.grandparent & {
grandparent: 1;
&:hover {
grandchildhover: 1;
}
}
}
}
}
This will add to the above css these two outputs:
.grandchild:hover {
grandchildhover: 1;
}
.grandparent .parent .child .grandchild:hover {
grandchildhover: 1;
}
Skip Generations
You can code it to skip some generations, like so:
LESS
.grandchild {
grandchildonly: 1;
.child & {
withchild: 1;
.parent & {
withparentchild: 1;
}
}
.parent & {
skipgenchild: 1;
}
}
CSS Output
.grandchild {
grandchildonly: 1;
}
.child .grandchild {
withchild: 1;
}
.parent .child .grandchild {
withparentchild: 1;
}
.parent .grandchild {
skipgenchild: 1;
}
Abstracted
There are various ways this could be abstracted out, such that the code does not give the appearance of a nested look (which could confuse a user). Something like this is one way (output similar to that given in first and second examples above):
.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;
}
}
}
Final Comments
As seven-phases-max linked to in his comment, there is talk of adding generational precision within a normal nested context. The solution given here requires one to think "opposite" of nesting, but rather think only about the element being targeted. So the way to add a .grandchild into another selector would not be this mixin:
LESS (expecting to add a parent by normal nesting)
.another-generational-parent {
.grandchild;
}
CSS Output
.another-generational-parent {
grandchildonly: 1;
}
.child .another-generational-parent {
withchild: 1;
}
.parent .child .another-generational-parent {
withparentchild: 1;
}
It would be best to add it into the original code according to the proper place, but if that is not possible, then some repetition is needed (unless you set up some way in the original code to "insert" parents through creative mixin calling--I have no time to devout to that here).
.parent .child .grandchild {
.another-generational-parent & {
another-generational-parent: 1;
}
}
Whether such opposite coding can be useful or not all depends upon one's goals and desires in organizing the LESS code.
这篇关于Less即时父选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
