在 LESS 中引用具有多层嵌套的父级

我有以下较少：

.container {
    .column, .columns {
        .one& {
            width: 40px;
        }
    }
}

当我编译时，我的 CSS 得到以下内容：

.one.container .column,
.one.container .columns {
    width: 40px;
}

但我期望得到：

.container .one.column,
.container .one.columns {
    width: 40px;
}

看起来父操作符 (&）在 LESS 中实际上指的是我期望成为祖父母的人。我是否正确地嵌套了东西？该文档没有显示任何嵌套超过一层的示例。我可以通过嵌套实现我想要的输出吗？

我正在使用通过 npm 安装的 lessc 1.3.3。

重要的是要考虑&作为更多的“亲子关系”组合器，而不是“父母”组合器。也就是说，它会将整个嵌套的选择器字符串带到该点（无论深多少层），并充当字符串替换持有者的等效项。所以用你的例子的简化版本......

.container {
    .column {
        .one& {
            width: 40px;
        }
    }
}

...该级别的选择器字符串是.container .column。这就是被“取代”的位置&，所以当你连接到开始正如您上面所做的那样，它会附加在开始 of 整个选择器字符串你最终会得到：

.one.container .column {width 40px;}

但是如果你从end（之间没有空格& and .） 然后...

.container {
    .column {
        &.one {
            width: 40px;
        }
    }
}

...变成：

.container .column.one {width 40px;}

这最后一张确实是班级组合你想要的，尽管只是不完全按照你希望的顺序。但顺序对浏览器来说并不重要，.one.column or .column.one是相同的，它只是意味着一个元素应用了两个单独的类，如下所示：

<div class="column one"></div>
<div class="one column"></div>

两者都是等价的，并且.one.column or .column.one因为选择器将选择两个元素，因为两个元素都有两个类。

如果顺序对您来说绝对重要（您必须让生成的 CSS 符合您的要求），那么您需要像这样进行一些重复：

.container {
    .column {
       ...generic column code here...
    }
    .one {
        &.column {
            width: 40px;
            ...any other code dependent on combination of .one.column here...
        }
    }
}