less - 更少的 CSS：& 具有多个类的反向父级？

Question

这是我第一次发现 & 父选择器非常有用，因此我不需要重新定义父选择器来修改子元素。

当然，这实际上用 LESS 很容易，但我不得不问！

<div id="skrollr-body" class="nonav">
    <div class="skrollable">

    </div>
</div>


#skroller-body {
    .skrollable {
        margin-top:40px;

        .nonav & {
            // this parent selector lets me modify 
            // .skrollable without duplicating it
            margin-top:0px;

        }
    }
}

的输出.nonav &是 .nonav #skroller-body .skrollable

我想知道我是否可以在#skroller-body.nonav .skrollable没有额外 HTML 标记（包装器div.nonav）的情况下以某种方式获得？

目前我只会复制父母

#skrollr-body {
    margin-top:40px;
    left:0;
    width:100%;

    .skrollable {
        margin-top:40px;
        position:fixed;
        z-index:100;
        .skrollable {
            position:absolute;

            .skrollable {
                position:static;
            }
        }
    }
    &.nonav {
            .skrollable {
                 margin-top:0px;
            }
    }
}

或者保存冗余输出；

#skroller-body.nonav .scrollable { margin-top:0px; }

但这里的重点是易于维护和阅读的 CSS 代码。

Answer 1

文档告诉我们：

运算符表示嵌套规则的&父选择器，最常用于将修改类或伪类应用于现有选择器时

所以：

#skroller-body {
        &.nonav {
            .skrollable {
                // stuff
            }
        }
    }
}