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。这是在&的位置被“替换”的内容，所以当你像上面那样连接到开头时，它会在开头附加 整个选择器字符串，你最终得到了：

.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...
        }
    }
}

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

1 个答案: