在前端开发中，我们经常会遇到需要多次使用同样的 CSS 样式代码的情况。这时候，为了避免修改时的繁琐，并且提高代码重用性，我们可以使用 SASS 中的 @extend。
@extend 的作用
@extend 可以将一个 CSS 选择器的样式继承到另一个选择器上。这样，我们就可以把相同的样式抽象成一个模块，并在需要的地方进行调用，从而简化 CSS 代码量。
如何使用 @extend
使用 @extend 很简单，下面是一个示例代码：
-- -------------------- ---- ------- -- -------- ---------- - ------ ----- ---------- ----- - -- -------- -------------- - ------- ----------- ----------- ------- -展开代码
在上述示例中，我们定义了一个基础样式 .baseStyle，颜色为红色，字体大小为 14px。然后我们定义了一个继承样式 .extendedStyle，使用 @extend 将 .baseStyle 继承过来，并且还添加了一个文本居中对齐样式。
@extend 的注意事项
使用 @extend 时需要注意以下几点：
- 不要滥用 @extend，否则会使代码可维护性变差；
- 只有当两个选择器具有相同的属性时才可以使用 @extend，否则会被编译器忽略；
- 继承样式必须位于被继承样式的下方。
@extend 的优点
使用 @extend 有以下几个优点：
- 提高代码复用性。使用 @extend 可以将相同的 CSS 样式抽象成一个模块，可以在多个地方调用，减少代码冗余；
- 代码简洁。通过 @extend，我们可以减少 CSS 的编写量，使代码更加简洁易懂；
- 降低了代码维护成本。使用 @extend 可以避免代码重复，修改起来也更加方便。
总结
@extend 是 SASS 中一个非常实用的特性，可以提高代码复用性和简化开发。在使用时，需要注意合理使用，避免滥用。同时，采用 @extend 可以让代码更加简洁易懂，也更加方便维护和修改。
示例代码
-- -------------------- ---- ------- -- -------- ---------- - ------ ----- ---------- ----- - -- -------- -------------- - ------- ----------- ----------- ------- - -- ---- ------ - ------- ----------- ------------ ----- - -- ---- ---- - ------- --------------- ------ ------ ------- ------ -展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64afc8a948841e9894bf0d0b
