SCSS的嵌套规则可以减少重复代码，那么如何在嵌套规则中使用父选择器？

王小婷

发布于 2023-10-03 08:42:40

1770

发布于 2023-10-03 08:42:40

在SCSS中，使用&符号来引用父选择器，在嵌套规则中使用父选择器。这样可以避免重复编写选择器，并且在生成的CSS中保持正确的层级关系。

以下是一个示例，展示了如何在嵌套规则中使用父选择器：

.button {
  background-color: blue;

  &:hover {
    background-color: darkblue;
  }

  &.active {
    background-color: red;
  }

  .icon {
    color: white;
    font-size: 16px;
  }
}

在上面的示例中，.button选择器是父选择器。在嵌套规则中，使用&引用父选择器。

&:hover表示当鼠标悬停在.button元素上时，应用这个样式。
&.active表示当.button元素有.active类时，应用这个样式。
.icon表示嵌套在.button元素内的.icon元素，不使用&引用父选择器。在编译为CSS后，生成的代码如下：

.button {
  background-color: blue;
}

.button:hover {
  background-color: darkblue;
}

.button.active {
  background-color: red;
}

.button .icon {
  color: white;
  font-size: 16px;
}

通过使用&引用父选择器，可以编写更具可读性和维护性的代码。

父选择器的引用可以嵌套在任何层级的规则中，并且可以与其他选择器和修饰符组合使用。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

background