Sass @extend 和继承
Sass @extend 指令
The @extend 指令允许您将一组 CSS 属性从一个选择器共享到另一个选择器。
The @extend 指令在您有几乎完全相同样式的元素，但只有少量细节不同时很有用。
以下 Sass 示例首先为按钮创建一个基本样式（此样式将用于大多数按钮）。 然后，我们创建一个“报告”按钮的样式和一个“提交”按钮的样式。 “报告”和“提交”按钮都通过 @extend 指令继承来自 .button-basic 类的所有 CSS 属性。 此外，它们有自己定义的颜色
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 输出
.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">Report this</button>。 您只需要指定 .button-report 即可获得两组样式。
The @extend 指令有助于使您的 Sass 代码保持 DRY。
