Sass @extend 和继承
Sass @extend 指令
@extend 指令允许您将一组 CSS 属性从一个选择器共享到另一个选择器。
如果您有几乎相同样式的元素，它们只在一些小细节上有所不同，那么 @extend 指令就非常有用。
以下 Sass 示例首先为按钮创建了一个基本样式（该样式将用于大多数按钮）。然后，我们为“报告”按钮创建一个样式，为“提交”按钮创建另一个样式。通过 @extend 指令，“报告”和“提交”按钮都继承了 .button-basic 类的所有 CSS 属性。此外，它们还定义了自己的颜色。
SCSS Syntax（SCSS 语法）
.button-basic {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
@extend .button-basic;
background-color: red;
}
.button-submit {
@extend .button-basic;
background-color: green;
color: white;
}
编译后，CSS 将如下所示：
CSS Output（CSS 输出）
.button-basic, .button-report, .button-submit {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
background-color: red;
}
.button-submit {
background-color: green;
color: white;
}
通过使用 @extend 指令，您无需在 HTML 代码中为一个元素指定多个类，例如：<button class="button-basic button-report">报告此事</button>。您只需指定 .button-report 即可获得两组样式。
@extend 指令有助于保持您的 Sass 代码非常 DRY（Don't Repeat Yourself，不要重复自己）。
