css – 是否有一个SASS规则用于输出后代到根?

使用SASS&指南针,你仍然可以用缩进的后代方式编写,但是添加一个规则/命令,以便将给定的后代写入另一个级别,例如根?

所以这:

#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: }

非常感谢

解决方法

你在寻找@ at-root:
#example-id-1 {
    background: blue;

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

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

请注意,这是Sass 3.3功能.

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效