本篇内容介绍了“Sass的@extend与继承如何使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
SASS是便是一门动态样式语言，是一款款强化CSS的辅助工具，它在CSS语法的基础上，增加了变量，嵌套，混合，导入，函数的高级功能，这些拓展使CSS更加强大与优雅，有助于更好的管理样式文件，以及更高效的开发项目。
@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。
如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。
以下 Sass 实例中，我们创建了一个基本的按钮样式 .button-basic，接着我们定义了两个按钮样式 .button-report 与 .button-submit，它们都继承了 .button-basic ，它们主要区别在于背景颜色与字体颜色，其他的样式都是一样的。
Sass 代码：
.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 按钮标签中就不需要指定多个类 class=”button-basic button-report” ，只需要设置 类就好了。
@extend 很好的体现了代码的复用。
“Sass的@extend与继承如何使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
