父节点选择器

父选择器&是由Sass发明的一个特殊选择器,用于嵌套选择器中引用外部选择器。它使以更复杂的方式重用外部选择器成为可能,比如添加伪类或在父类之前添加选择器。

当在内部选择器中使用父选择器时,它将被相应的外部选择器替换。

因为父选择器可以被h1这样的类型选择器替换,所以只允许在复合选择器的开头使用,在复合选择器的开头也允许使用类型选择器。例如,span&是不允许的。 不过,我们正在考虑放宽这一限制。如果您想帮助实现这一点,请查看GitHub issue

添加前缀

还可以使用父选择器向外部选择器添加额外的后缀。当使用像BEM使用高度结构化类名的方法时,这尤其有用。只要外部选择器以字母数字名称结尾(如class、ID和元素选择器),就可以使用父选择器附加附加文本。

SassScript

父选择器也可以在SassScript中使用。它是一个特殊的表达式,与选择器函数使用的相同格式返回当前父选择器:

如果&表达式在任何样式规则之外使用,它将返回null。由于nullfalsey,这意味着您可以轻松地使用它来确定是否在样式规则中调用mixin

高级嵌套规则

您可以使用&作为一个普通的SassScript表达式,这意味着您可以将它传递给函数或将它包含在插值中—甚至在其他选择器中!将它与选择器函数@at-root规则结合使用,可以以非常强大的方式嵌套选择器。

例如,假设您想编写一个匹配外部选择器和元素选择器的选择器。您可以编写一个像如下的mixin,它使用selector-unify()&与用户的选择器组合在一起。

当Sass嵌套选择器时,它不知道使用什么插值函数来生成它们。这意味着即使使用&作为SassScript表达式,它也会自动将外部选择器添加到内部选择器。这就是为什么您需要显式地使用@at-root规则来告诉Sass不要包含外部选择器。

上次更新: 2019-11-5 4:49:11 PM