@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。
如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。
以下 Sass 实例中，我们创建了一个基本的按钮样式 .button-basic，接着我们定义了两个按钮样式 .button-report 与 .button-submit，它们都继承了 .button-basic ，它们主要区别在于背景颜色与字体颜色，其他的样式都是一样的。
.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; }
结果显示如上，也就是使用继承的话会让代码中出现群组选择器，也就是说相同的属性会直接在群组中使用
原文：https://www.cnblogs.com/camellioil/p/14695074.html