什么是 SASS 中的 @extend 指令？

Sass 是 Syntactically Awesome Style Sheet 的缩写。它是级联样式表 (CSS) 的升级版，是可用于编写 CSS 的流行预处理器之一。

@extend 是 Sass 中的一个关键字，它允许从一个选择器到另一个选择器共享一组 CSS 属性。这对于重用样式和使样式表更加模块化很有用。它存在于所有三个可用于 CSS 的预处理器中。

@extend 指令的工作

Sass 在扩展选择器时使用智能统一。以下是规则：

如果它们在各个方面都匹配，它将两个选择器组合在一起。
它修剪和减少冗余的选择器，同时仍确保它们的特异性保持大于或等于扩展器的特异性。
它知道如何处理组合器、通用选择器和包含选择器的伪类。
它还尝试混合复杂的选择器，以便它们独立于 HTML 元素的嵌套顺序继续工作。
它确保不会生成不可能针对任何元素的选择器。

@extend 和 Mixin 的区别

这是每个从 Sass 开始的人都会遇到的普遍问题。根据文档，可以使用以下几点来消除混淆：

当您必须表达相关类（也称为语义类）之间的关系时，建议使用@extend。
当样式集合之间没有关系时，建议使用 mixins。通过这种方式，您可以通过接受参数使其可定制。这使得它易于配置并且也可用于不同的情况。

扩展范围和占位符选择器

扩展范围： Sass 可以说有上游流。这使其规则可预测且易于理解。当一个样式表扩展一个选择器时，效果只会在上游模块上看到，并且使用 @use 或 @forward 规则加载，并且以上游方式类似。这也称为扩展范围。
占位符选择器：占位符选择器，顾名思义，用作样式的占位符。当您在 CSS 输出中想要它的扩展版本但不想要样式本身时，它们就会发挥作用。用作占位符选择器的选择器以百分比 (%) 开头，而不像一般选择器以点 (.) 开头。

以下示例演示了 @extend 指令。

示例 1：假设您有两个类，背景图像和 ProfileImage，它们都需要一些共同的样式。如本例所示，可以使用@extend 指令。

.backgroundImage{
    border-radius:50%;
    height:100px;
    width:100px;
}

.profileImage{
    @extend .backgroundImage;
    border:none;
}

输出：这将使编译器生成以下 CSS 示例。

.backgroundImage, .profileImage {
  border-radius: 50%;
  height: 100px;
  width: 100px;
}

.profileImage {
  border: none;
}

示例 2：对于本示例，我们将使用 @extend 指令扩展多个类。

.backgroundImage{
    border-radius:50%;
    height:100px;
    width:100px;
}

.profileImage{
    @extend .backgroundImage;
    border:none;
    filter: grayscale(100%);
}
.finalImage{
    @extend .profileImage;
}

输出：这被转换为以下 CSS。

.backgroundImage, .profileImage, .finalImage {
  border-radius: 50%;
  height: 100px;
  width: 100px;
}

.profileImage, .finalImage {
  border: none;
  filter: grayscale(100%);
}