SASS 中如何获取父元素的选择器？

在编写 SASS 样式时，经常会遇到需要在嵌套元素中应用父元素的选择器的情况，这时就需要用到 SASS 提供的父选择器。

父选择器的基本用法

父选择器（&）是 SASS 中一个特殊的符号，用于表示当前元素的父元素选择器。在嵌套选择器中，子元素可以通过 & 符号来引用父元素的选择器。

例如，我们要为一个按钮设置正常和悬停状态的样式，可以使用以下的 SASS 代码：

.button {
  background-color: blue;

  &:hover {
    background-color: red;
  }
}

这样编译出来的 CSS 代码是：

.button {
  background-color: blue;
}
.button:hover {
  background-color: red;
}

获取父元素的选择器

有时我们需要在父元素嵌套的某一层元素中应用父元素的选择器，这时需要用到特殊的父选择器。

为了获取父元素的选择器，可以在嵌套选择器中使用 & 符号直接引用父元素的选择器，也可以使用插值语法 #{&}，插值语法用于将父选择器插入到字符串或属性值中。

下面是一个示例，用于为某一个弹出框添加关闭按钮的样式：

-- -------------------- ---- -------
------ -
  ------------- -
    ----------------- -----

    --------- -
      -------- --- --

      -- -- - ---------- --
      -------- ---- --

      -- -------------- --
      -------- ------- --
    -
  -
-

这样编译出来的 CSS 代码是：

.modal .close-button {
  background-color: gray;
}
.modal .close-button::before {
  content: '&关闭 ';
  content: '.modal .close-button关闭 ';
  content: '.modal .close-button关闭 ';
}

可以看到，& 符号和插值语法在这里都达到了相同的效果，都成功地获取了父元素的选择器。

结论

SASS 中的父选择器是一种非常有用的功能，可以让我们在编写样式时更加灵活和方便。使用 & 符号和插值语法可以获取父元素的选择器，从而实现在嵌套元素中应用父元素选择器的功能。

在实际应用中，我们应该根据实际情况选择使用 & 符号或插值语法，尽可能简洁和直观地编写样式，提高代码的可读性和维护性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6776039e6d66e0f9aa08c8c8