在使用 SASS 进行前端开发时，我们经常会使用 "@extend" 和 "@include" 这两个语法。虽然它们都可以用来复用样式，但它们的实现方式和使用场景有所不同。在本文中，我们将深入探讨这两个语法的区别以及如何在实际开发中使用它们。
"@extend"
"@extend" 是一种继承样式的方式，它可以将一个选择器的样式继承到另一个选择器上。这种方式可以让我们避免在样式表中重复编写相同的样式，提高代码的可维护性和可读性。
下面是一个 "@extend" 的示例：
-- -------------------- ---- ------- -- -------- ---- - -------- ----- ------- --- ----- ----- - -- ------ ------------ - ------- ----- ----------------- -------- ------ ----- -
在上面的代码中，我们定义了一个名为 ".btn" 的基础样式，它包含了按钮的一些基本样式。然后我们使用 "@extend" 将 ".btn" 样式继承到 ".btn-primary" 上，同时添加了一些特定于 ".btn-primary" 的样式。
这样做的效果是，".btn-primary" 继承了 ".btn" 的所有样式，同时还添加了自己的样式。这样我们就可以通过一个基础样式来定义一组相关样式，同时保持代码的简洁和可读性。
需要注意的是，"@extend" 不会生成新的样式，它只是将一个选择器的样式继承到另一个选择器上。这意味着，如果我们在一个选择器上使用了 "@extend"，那么这个选择器的样式会同时应用到所有继承它的选择器上。
"@include"
"@include" 是一种混入样式的方式，它可以将一个样式规则集合混入到另一个样式规则中。这种方式可以让我们在不同的样式中复用相同的代码块，提高代码的可维护性和可读性。
下面是一个 "@include" 的示例：
-- -------------------- ---- ------- -- -------- ------ --------- - -------- ----- ------- --- ----- ----- - -- ------ ---- - -------- ---------- - ------------ - -------- ---------- ----------------- -------- ------ ----- -
在上面的代码中，我们定义了一个名为 "btn-style" 的混入样式，它包含了按钮的一些基本样式。然后我们在 ".btn" 和 ".btn-primary" 中使用 "@include" 将 "btn-style" 样式混入到这些样式中。
这样做的效果是，".btn" 和 ".btn-primary" 都包含了 "btn-style" 的样式，同时还添加了自己的样式。这样我们就可以通过一个混入样式来定义一组相关样式，同时保持代码的简洁和可读性。
需要注意的是，"@include" 会生成新的样式，它会将混入样式的样式规则插入到使用它的选择器中。这意味着，如果我们在一个选择器上使用了 "@include"，那么这个选择器的样式会被扩展为混入样式的样式规则加上自己的样式规则。
总结
"@extend" 和 "@include" 都可以用来复用样式，但它们的实现方式和使用场景有所不同。"@extend" 是一种继承样式的方式，它可以将一个选择器的样式继承到另一个选择器上；"@include" 是一种混入样式的方式，它可以将一个样式规则集合混入到另一个样式规则中。在实际开发中，我们需要根据具体的情况选择使用哪种方式，以提高代码的可维护性和可读性。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6603c790d10417a222041f85