前言
SASS 是一款 CSS 预处理器，它通过一些特殊的语法扩充了 CSS 的功能，提高了开发效率，让开发者更加灵活的管理样式，其中的 @extend 语句可以使开发者更方便地在样式中进行复用和继承，提高代码的可维护性和可扩展性。
什么是 @extend 语句
@extend 语句是 SASS 中用来扩展样式的一种方法，可以让一个选择器复用另一个选择器中的样式，以实现继承的效果，可以减少重复代码的书写，提高代码的复用性。
@extend 语句的使用方法
@extend 语句的基本语法如下：
%selector {
/* 基本样式 */
}
.selector {
@extend %selector;
/* 扩展样式 */
}%selector 定义了一个“占位符选择器”，不会被编译成实际的 CSS 样式，而是用来作为继承的基础。@extend %selector; 指定了继承的对象，实现了样式的复用和继承。
@extend 语句的优点和使用技巧
1. 减少冗余代码
使用 @extend 语句可以减少冗余代码，提高代码的复用性，比如我们可以定义一个按钮基本样式的占位符选择器 %button，然后在需要使用按钮的地方，直接使用 @extend %button; 就可以继承按钮的基本样式，避免了重复书写按钮的样式。
2. 维护方便
使用 @extend 语句可以让我们更好地维护样式，当需要修改某个样式时，只需要修改占位符选择器或者继承某个选择器的样式即可，不用修改多处相同的样式，提高了代码的可维护性。
3. 避免样式覆盖
在 CSS 中，当多个样式定义了相同的选择器时，后面的样式会覆盖前面的样式，导致样式冲突的问题，但是使用 @extend 语句可以避免这种问题，因为 @extend 语句不是通过选择器来实现样式定义的，而是通过继承另一个选择器的样式来实现样式的复用和继承。
4. 避免深层嵌套
CSS 中的深层嵌套会导致选择器的复杂度增加，影响样式的可读性和可维护性。而使用 @extend 语句可以避免深层嵌套，减少样式的复杂度，提高代码的可读性。
示例代码
下面是一个示例代码，定义了一个基本的按钮样式，在其他地方使用 @extend %button 即可。
-- -------------------- ---- ------- -- ---------- ------- - -------- ------------- -------- ---- ----- -------------- ---- ---------- ----- ------------ ----- ----------- ------- ---------------- ----- ------ ----- ----------------- -------- ----------- ---------------- ---- ----- - -- ---- ------- - ------- -------- - -- ----------- ------- - ------- -------- ------- --- ----- ----- ----------------- ----- ------ ----- -
总结
@extend 语句是 SASS 中用来扩展样式的一种方法，可以减少代码冗余，提高代码复用性和维护性。但是过度使用 @extend 语句也会导致样式的继承关系复杂，不易维护，因此需要根据具体情况灵活运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6481276248841e98940929fc