是否有将后代输出到根的 SASS 规则？

Posted 2023-03-06

【中文标题】是否有将后代输出到根的 SASS 规则？

【英文标题】：Is there a SASS rule for outputting a descendant to the root?

【发布时间】：2014-11-07 18:40:52

【问题描述】：

使用 SASS 和 Compass，您是否仍然可以以缩进的后代方式编写，但添加一个规则/命令，以便将给定的后代写入另一个级别，例如根？

所以这个：

#example-id-1 
    background: blue:

    #example-id-2 
        background: red:

        #example-id-3 
            background: yellow:
        

    

通常会输出这个：

#example-id-1  background: blue: 
#example-id-1 #example-id-2  background: red: 
#example-id-1 #example-id-2 #example-id-3  background: yellow: 

但是可以将规则应用于#example-id-2 或#example-id-3 以便输出变为：

#example-id-1  background: blue: 
#example-id-2  background: red: 
#example-id-3  background: yellow: 

非常感谢

【问题讨论】：

SASS 仍然是 CSS....像往常一样做就行了。

ID 必须是唯一的，为什么不像上一个示例那样设置它们的样式？

据我所知，ID 在 DOM 中必须是唯一的，而不是 CSS，因此可以以后代方式使用。

以这种方式嵌套 id 的原因是由于以视觉逻辑方式跟踪后代。后代父级可能具有多种样式，并且前/继续的后代兄弟姐妹（无论有多少）也可能具有多种样式，因此如果您要删除后代并手动将其放置在父块之外，这会使维护变得更加耗时（大量滚动浏览您的 CSS 文件以找到正确的样式。）

【参考方案1】：

您正在寻找@at-root:

#example-id-1 
    background: blue;

    @at-root #example-id-2 
        background: red;

        @at-root #example-id-3 
            background: yellow;
        
    

请注意，这是 Sass 3.3 的一项功能。