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

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

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

代码语言：javascript复制

.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后，生成的代码如下：

代码语言：javascript复制

.button {
  background-color: blue;
}

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

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

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

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

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

background button icon scss 编译

0 人点赞