在前端开发中，我们经常会发现一些样式规则对多个元素都是相同的，因此需要在不同的类中重复定义这些规则。SASS 中的 @extend 关键字可以解决这个问题，它允许我们定义一组基础样式，然后在要使用这些样式的地方通过 @extend 将该样式继承到其他类中。
@extend 的语法
使用 @extend 继承样式时，需要在需要继承的样式类名前加上关键字 @extend，并填写要继承的类名，语法如下：
.基础样式 {
属性: 值;
}
.继承样式 {
@extend .基础样式;
//继承基础样式的属性和值
}其中，基础样式和继承样式都是普通的样式类名，可以根据需要自定义。
@extend 的优点
使用 @extend 关键字可以让我们避免在实现相同功能的样式时出现代码冗余，而且减少了多余的 CSS 代码，同时也增强了样式的可维护性。
当我们需要修改基础样式时，只需修改一次即可，所有继承该基础样式的样式都会自动更新，省去了寻找需要更改的地方的麻烦，也减少了出错的机会。
示例代码
下面是一个使用 @extend 实现样式继承的示例代码，这个例子定义了一个基础样式类名 .alert，然后通过 @extend 在另外两个类中继承该样式。
-- -------------------- ---- ------- ------ - ----------------- ----- ------- --- ----- ---- ------ ---- -------- ----- - ------ - ------- ------- ------ ----- ------------------- - -------- - ------- ------- ------------- ---- -
在上述示例代码中，类名 .alert 定义了一组基础样式，然后类名 .error 和类名 .warning 都继承了 .alert 的样式，其中类名 .error 覆盖了 .alert 中的 color 属性，而类名 .warning 则新增了一个 border-width 样式属性。
总结
在 SASS 中，通过 @extend 关键字实现样式的继承是一种简单而有效的样式复用机制，能够帮助我们减少代码量、提高可维护性，降低维护成本。但是，在使用 @extend 时我们也需要注意风险，因此需要根据实际情况进行合理使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651fa1fd95b1f8cacd72a951