定义和使用
@extend 指令使您可以将一组 CSS 属性从一个选择器共享到另一个选择器。
如果您具有几乎相同样式的元素，但仅在一些小细节上有所不同，则 @extend 指令很有用。
示例
下面的 Sass 示例首先为按钮创建一个基本样式（此样式将用于大多数按钮）； 然后，我们为“报告”按钮创建一种样式，为“提交”按钮创建一种样式； “Report” 和 “Submit” 按钮都通过 @extend 指令从 .button-basic 类继承所有 CSS 属性；此外，它们还定义了自己的颜色：
编译后，CSS 将如下所示：
- .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;
- }
- .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-report 即可获得两组样式。
@extend 指令有助于使您的 Sass 代码保持非常干燥。