更少的css父选择器，只需向上走2-3-x步

举个例子：

<div class=component>

    <div class=top></div>
    <div class=bottom>
        <div class=bar>
              a bar is inserted here
        </div>
    </div>

</div>

请阅读.bar（）中的内联注释以理解问题

A） 有没有一种方法可以在更少的时间内做到这一点？ B） 这不是一个好功能吗

---

此外，您应该不仅能够切断父选择器的末端，还能够切断主选择器的末端。在某些情况下，元素被包装，而父选择器在这种情况下不起作用

只需在顶部

.component

级别将其写为

.bottom>.bar

。详细的父选择器引用将在中讨论，但在这个特定情况下，您是否真的相信

&（1）>.bottom>&（0，1）

（或来自#1075的任何类似语法）将比

.bottom>.bar

更方便？@最多七个阶段是的，我可以做到，我现在就做到了。唯一的问题是，如果您想给某人一个调用（.bar（））的方法，您不想强迫他们也在组件级别声明>.bottom>.bar。他们所要做的就是调用.bar（）。.bar（）应该真正负责处理与.bar（）相关的所有内容，并且它应该能够查找定义位置，以便在之前的任何级别应用其他内容。还需要应用边框顶部、框阴影和其他内容。有很多方法可以解决这个问题，但它们并不像这样方便。至于mixin如何生成这样的样式-使用mixin参数和显式类生成，例如

@{custom class}

和

.bottom>@{custom class}

。您不知道这样的mixin将在什么上下文中被调用（即

&（1）>。如果我调用
.class1{.class2{
之外的任何地方，bottom>&（0，1）

将失败-仍然没有太多意义）。此外，

extend

似乎更适合重复使用的用例。@seven phases max我还有另一个想法。如果您可以定义一个选择器，而忽略正在定义或调用的嵌套性质，该怎么办。if in.bar（）您可以在忽略您所在位置的情况下定义一些选择器模式，以便能够跳出。这应该是一个非常容易实现的模式。我知道，我可以在嵌套逻辑之外声明它，但这会阻止代码驻留在一个地方。相反，您可以让嵌套逻辑定义选择器（以及它们的css）不必考虑嵌套的位置，这是否已经可能？

.component {

   .bar {
        position:fixed;
        left:0;
        right:0;

        // ------ If bar is included in parent bottom, then we want to add bottom:0 ----

        &.bottom {
                bottom:0;

                // This won't work, because it will result in:

                .component.bar.bottom {
                        bottom: 0
                }
        }

        // What we actually desire to have is:

        .component > .bottom > .bar {
                bottom:0;
        }

        // One way to achive this would be to allow the parent selector to walk up

        // The &(1) would be all of & minus the last one.
        // The $(0, 1) would be all of & minus all of &(1)
        &(1) > .bottom > &(0, 1) {
                bottom: 0;
        }

        // This should result in:

        .component > .bottom > .bar {

        }
    } 

}