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

Question

我有以下 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。

Answer 1

将& 更多地视为“父系”组合器，而不是“父级”组合器，这一点很重要。也就是说，它将整个嵌套的选择器字符串带到该点（无论有多少层深），并充当字符串替换持有者的等价物。因此，使用您的示例的简化版本...

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

...该级别的选择器字符串是.container .column。这就是在& 的位置“替换”的内容，因此当您像上面那样连接到 beginning 时，它会附加在 beginning 的 整个选择器字符串，你最终得到：

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

但是如果你从 end 连接（& 和 . 之间没有空格）那么...

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

...变成：

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

这最后一个确实是您想要的类组合，尽管与您希望的顺序不太一样。但是顺序对浏览器来说并不重要，.one.column 或 .column.one 是相同的，它只是意味着一个元素同时应用了两个单独的类：

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

这两者是等价的，.one.column 或 .column.one 作为选择器将选择这两个元素，因为这两个元素都有两个类。

如果顺序对您来说绝对重要（您必须让生成的 CSS 符合您的要求），那么您需要做一些重复，如下所示：

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