css - 重用SCSS中的选择器作为后缀

This question already has an answer here:

Append the parent selector to the end with Sass
                                
                                    （1个答案）
                                
                        
                                5年前关闭。
            
                    
如何在SCSS中使用＆符重用父选择器作为后缀？

我来自LESS CSS，现在正在SCSS中做我的第一个项目。在LESS中，我可以使用＆符号在选择器中的任何位置引用父选择器。在我看来，这个操作员在SCSS中有一些怪癖。

例：

.grid {
    /* grid styles */

    ul& {
        /* grid styles if this class was set to an UL element */
    }
}

在LESS CSS中，这可以编译为以下内容，这是我在大多数情况下需要的：

.grid {
    /* grid styles */
}
ul.grid {
    /* grid styles if this class was set to an UL element */
}

但是在SCSS中，这引发了异常。 SCSS中还有另一种表示法，如下所示：

.grid {
    /* grid styles */

    ul#{&} {
        /* using SCSS escaping syntax*/
    }
}

但这又给了我以下的意外结果：

.grid {
    /* grid styles */
}
.grid ul.grid {
    /* Uh SCCS, what happened now? */
}

如果不是选择器的第一部分，SCSS中是否可以重用父选择器？

最佳答案

您可以使用@at-root指令来生成规则，该规则在其定义范围之外生成，但保留其父代（&）的值。

.grid {

    /* grid styles */

    @at-root {

        ul#{&} {
            /* using SCSS escaping syntax*/
        }
    }
}

输出量

.grid {
  /* grid styles */
}

ul.grid {
  /* using SCSS escaping syntax*/
}

在sassmeister上测试



有关SASS documentation page的更多信息

关于css - 重用SCSS中的选择器作为后缀，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27544352/