sass中的@at-root在less中是什么

Question

div {
    color: #666;
    
    p {
        color: #f00;
    }
}

如上，less编译后会生成

div {
    color: #666;
}
div p {
    color: #f00;
}

我现在希望生成的是

div {
    color: #666;
}
p {
    color: #f00;
}

也就是像sass中@at-root的功能，应该怎么写ne

Answer 1

没怎么听说过，可能没有吧，不过css3里倒是有个:root选择器，可以直接选择根元素

Answer 2

我可以很明确的告诉你less没有这个

Answer 3

  div {
        color: #666;
        
        html & p {
            color: #f00;
        }
    }

可以这么写 & 符号写在后面能够让前面的选择器逃出当前的作用域

Answer 4

// scss

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

// less

    .base() {
        color: #666;
    }
    
    div, p {
        .base();
    }