SASS如何使用父选择器？代码示例

父选择器是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;
    }

}

编译的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伪类在带有父选择器的锚标记中添加效果。

---