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;
}

好处：

1. 您可以使用前缀或后缀作为父选择器的名称创建新类，这使我们能够编写
   非常结构化的 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;
   }
   
           

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