SASS @at-root，然后 LESS 啥来实现同样的功能

Posted 2023-03-06

【中文标题】SASS @at-root，然后 LESS 啥来实现同样的功能

【英文标题】：SASS @at-root, then LESS what to achieve the same functionSASS @at-root，然后 LESS 什么来实现同样的功能

【发布时间】：2016-11-25 00:53:05

【问题描述】：

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

div 
    color: #666;

    @at-root p 
        color: #f00;
    

然后会像这样生成：

div 
    color: #666;


p 
    color: #f00;

但是在LESS，如何实现同样的功能呢？

【问题讨论】：

使用 SASS 生成的 CSS 是什么？

我认为你不能在 LESS 中做任何类似的事情

不过我觉得这个功能很有用，以后会支持吗？

在 github 中有一个关于自 2012 年以来开放的类似功能的线程，目前它似乎没有实现：github.com/less/less.js/issues/1075

【参考方案1】：

正如问题 cmets 中所述，LESS 中没有类似的功能。有一个使用 LESS 父选择器 & 和 CSS 伪类 :not() 的技巧。它有一些已知的错误，即编译的 CSS 选择器中的无用部分。

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

编译后：

div 
    color: #666;


p:not(div) 
    color: #f00;