在前端开发中，我们常常需要重复使用相同的样式，这时候 SASS 中的继承 - @extend 就可以派上用场了。本文将详细介绍 @extend 的使用技巧，帮助你更好地掌握这一特性。
什么是 @extend
在 SASS 中，@extend 可以让一个选择器继承另一个选择器的样式，从而避免重复编写相同的样式代码。使用 @extend 可以大大提高代码的复用性和可维护性。
@extend 的使用方法
使用 @extend 很简单，只需要在需要继承的选择器后面加上 @extend 关键字，然后在后面跟上被继承的选择器即可。例如：
------ - ------ ---- - -------- - ------- ------- ---------- ----- -
上面的代码中，.warning 继承了 .error 的样式，同时还定义了自己的 font-size 样式。
继承的注意事项
选择器的顺序
在使用 @extend 时，被继承的选择器必须在继承选择器的后面定义。如果顺序颠倒，就会出现样式覆盖的问题。
-------- - ---------- ----- - ------ - ------- --------- ------ ---- -
上面的代码中，.warning 后定义的 .error 继承了 .warning 的样式，并加上了自己的 color 样式。但是，由于 @extend 中 .warning 在 .error 之后定义，因此最终 .warning 的样式会被 .error 的样式覆盖。
继承的属性
使用 @extend 继承的样式，只会继承选择器中包含的属性。例如：
------ - ------ ---- ---------- ----- - -------- - ------- ------- ---------- ----- -
上面的代码中，.warning 继承了 .error 的 color 和 font-size 样式，但是自己定义了 font-size 样式。因此最终 .warning 的样式是：
-------- - ------ ---- ---------- ----- -
继承的选择器
使用 @extend 继承的选择器，会被合并到继承选择器中。例如：
------ - ------ ---- - -------- - ------- ------- ---------- ----- - ------ -------- - ------------ ----- -
上面的代码中，.alert .warning 继承了 .warning 的样式，并加上了自己的 font-weight 样式。因此最终 .alert .warning 的样式是：
------ -------- - ------ ---- ---------- ----- ------------ ----- -
选择器的改变
使用 @extend 继承的选择器，可以通过添加新的选择器来改变。例如：
------ - ------ ---- - -------- - ------- ------- ---------- ----- - ------ -------- - ------------ ----- - -------- -------- - ------ ------ -
上面的代码中，.success .warning 继承了 .warning 的样式，并加上了自己的 color 样式。因此最终 .success .warning 的样式是：
-------- -------- - ------ ------ ---------- ----- -
总结
@extend 是 SASS 中非常实用的特性，能够大大提高代码的复用性和可维护性。在使用 @extend 时，需要注意选择器的顺序、继承的属性、继承的选择器以及选择器的改变等问题。通过本文的学习和实践，相信你已经掌握了 @extend 的使用技巧，可以在实际开发中灵活运用了。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66278090c9431a720c429207