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

Question

我有以下更少:

.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

重要的是要想到 &作为更多的“出身”组合器，而不是“ parent ”组合器。也就是说，它将整个嵌套的选择器字符串带到那个点(无论深度多少)，并充当字符串替换持有者的等价物。所以用你的例子的简化版本......

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

...该级别的选择器字符串是 .container .column .这就是在 &的位置“替换”的东西，所以当你像上面那样连接到开头时，它会附加在整个选择器字符串的开头，你最终会得到你的:

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

但是，如果您从末尾连接( & 和 . 之间没有空格)，那么...

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

...变成:

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

最后一个确实是您想要的类(class)组合，尽管与您希望的顺序不同。但是顺序对浏览器没有影响， .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...
        }
    }
}