在 Sass 中，我们使用 @include 和 @extend 来复用代码，提高样式表的可维护性和可读性。虽然它们的作用是相似的，但是它们的实现和结果却有所不同。
@include
@include 是 Sass 中的一个功能强大的函数调用指令。它用于将一个定义好的 mixin 插入到当前选择器中。Mixin 是一段可以重复使用的样式代码段。
以下是很常见的一段简单的 mixin：
@mixin button($bg-color) {
background-color: $bg-color;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}使用 @include 就可以在选择器中调用这个 mixin：
.button {
@include button(red);
}在编译后的 CSS 文件中，代码将被编译为：
.button {
background-color: red;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}通过使用 @include 指令，我们可以缩短我们的样式表，同时保持大量的代码的可重用性。
@extend
与 @include 不同，@extend 是 Sass 中一个集成了 CSS 中的 extend 功能的指令。它能够将一个选择器继承到另一个选择器中。可以想象成是 CSS 中常用的复制一个选择器的所有 CSS 规则到另一个选择器。
以下是一个示例代码：
-- -------------------- ---- ------- ---- - ----------------- ---- ------ ----- -------- ---- ----- -------------- ---- ------- -------- - ------------ - ------- ----- ----------------- ----- -
在编译后的 CSS 文件中，代码将被编译为：
-- -------------------- ---- ------- ----- ------------ - ----------------- ---- ------ ----- -------- ---- ----- -------------- ---- ------- -------- - ------------ - ----------------- ----- -
从上面的代码中可以看出，在 .btn-primary 中使用了 @extend .btn，它的 CSS 规则与 .btn 相同。在编译后的 CSS 中，.btn-primary 具有了 .btn 的所有规则，同时也应用了自身的规则。
区别
虽然它们的作用很相似，但 @include 和 @extend 是有区别的。
可重用性
@include 主要用于 mixin 的复用，可以在 Sass 中定义一个 mixin，然后在多个选择器中调用，来避免复写样式代码。而 @extend 则是将多个选择器中共有的样式进行复用，最终只会产生一个 CSS 规则。虽然这样可以优化页面加载速度，减小文件大小，但选择器的样式规则不能复用，即无法在其他选择器中使用。
继承
@include 将 mixin 插入到当前选择器中，该选择器可以有其他样式代码。而 @extend 则是将一个选择器的所有样式复制到另一个选择器中。在编译后的 CSS 中，可能会创建出多个规则，但这些规则都有相同的样式。
结论
@include建议用于 mixin 的复用，实现更细粒度的复用，更加灵活。@extend建议用于继承选择器样式，减少 CSS 规则的冗余，实现样式复用。- 使用
@extend要注意，它有可能增加 CSS 文件的大小，具体情况需要根据实际情况决定。 - 将两种方法结合使用可以更好地实现样式复用，提高代码的可维护性。
参考代码
-- -------------------- ---- ------- ------ ----------------- - ----------------- ---------- ------ ----- -------- ---- ----- -------------- ---- ------- -------- - ---- - -------- ------------ - ------------ - ------- ----- ----------------- ----- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f3c9a6f40ec5a964e4e3e0