SASS @at-root, 然后LESS如何实现相同的功能

Question

在 SASS 中，为了跳出嵌套，我们可以这样写：

div {
    color: #666;

    @at-root p {
        color: #f00;
    }
}

然后会生成如下内容：

div {
    color: #666;
}

p {
    color: #f00;
}

但在LESS中，如何实现相同的功能？

- Mathink

---

使用SASS生成了什么CSS？ - Justinas

我认为在LESS中你无法做类似的事情。 - user4994625

但我认为这是一个有用的函数，将来会得到支持吗？ - Mathink

自2012年以来，Github 上一直有一个关于类似功能的讨论帖，但目前似乎并没有实现的计划：https://github.com/less/less.js/issues/1075 - user4994625

Answer 1

如问题评论中所述，LESS中没有类似的功能。有一个技巧可以使用LESS父选择器&和CSS伪类:not()。它有一些已知的缺陷，会在编译后的CSS选择器中产生无用的部分。

div {
    color: #666;
    p:not(&){
        color: #f00;
    }
}

编译后：

div {
    color: #666;
}

p:not(div) {
    color: #f00;
}

- Amirreza Noori