SASS如何使用父选择器（代码示例） _CSS选择器

父选择器是SASS中的一种特殊类型的选择器, 它使我们可以有效地重用外部(父)选择器。请参阅下面的示例以了解想法：
例如：假设我们有以下CSS样式块,

a { text-decoration: none; display: inline-block; background-color: lightgray; }

现在, 你要向锚块添加悬停效果, 然后你将编写

a:hover { background-color: gray; }

使用SASS, 你无需重复外部选择器(a), 你可以执行以下操作：
SASS文件：

a { text-decoration: none; display: inline-block; background-color: lightgray; & :hover { background-color: gray; } }

这里&称为父选择器。编译后的CSS文件将与我们的CSS样式相同。
编译的CSS文件：

a { text-decoration: none; display: inline-block; background-color: lightgray; }a:hover { background-color: gray; }

优点：
你可以创建带有前缀或后缀作为父选择器名称的新类, 这使我们能够编写
非常结构化的CSS样式, 非常高效。
SCSS文件：

.main-block { border: 1px solid black; position: relative; & _subblock1 { position: absolute; display: block; }& _subblock2 { position: absolute; display: inline-block; }}

【SASS如何使用父选择器（代码示例）】编译的CSS文件：

.main-block { border: 1px solid black; position: relative; }.main-block_subblock1 { position: absolute; display: block; }.main-block_subblock2 { position: absolute; display: inline-block; }

你可以使用不同的伪类或伪元素在外部(父)选择器中添加样式。见
第一个示例, 我们使用：hover伪类在带有父选择器的锚标记中添加效果。