5

我有以下更少：

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

4

1 回答 1

5

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

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

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

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

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

.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...
        }
    }
}
于 2013-01-23T10:01:51.263 回答