在前端开发中，我们经常需要将多个样式应用于不同的元素中，这时候就需要用到 SASS 的 @extend 和 @include 关键字。这两个关键字通过提高样式的复用性，可以简化我们的代码，加快开发速度，提高代码质量。
@extend 关键字
@extend 是 SASS 中的一个重要特性，它可以实现样式继承。通过 @extend，我们可以将一个 CSS 选择器的样式继承到另一个选择器中，从而避免我们重复编写样式代码。
使用方法：
-- -------------------- ---- ------- ---- - -------- ----- ------- --- ----- ----- ----------------- ----- - ------------ - ------- ----- ------ ----- ----------------- -------- - -------------- - ------- ----- ------ ----- ----------------- -------- -
在上面的示例代码中，我们定义了一个 .btn 的公共样式，然后使用 @extend 关键字将它继承到 .btn-primary 和 .btn-secondary 中。这样，我们就避免了重复编写 .btn 的样式代码，提高了代码的可维护性。
需要注意的是，在使用 @extend 时要注意 CSS 样式的继承顺序。样式的继承顺序是从右到左，也就是说，@extend 关键字要写在样式选择器的最右边，例如：.btn-primary {@extend .btn;}
@include 关键字
@extend 是实现样式继承，而 @include 则是实现混合样式的关键字。通过 @include，我们可以将一个 mixin 中的样式应用到一个或多个选择器中。
使用方法：
-- -------------------- ---- ------- ------ ------ - -------- ----- ---------------- ------- ------------ ------- - ------ - -------- ------- ---------- ----- ------------ ----- - -------- - -------- ------- ---------- ----- ------------ ---- -
在上面的示例代码中，我们定义了一个名为 center 的 mixin，它包含了一组样式，用于实现元素的水平垂直居中。然后我们使用 @include 关键字将 mixin 中的样式应用到了两个不同的选择器中，分别是 .title 和 .content。
需要注意的是，在使用 @include 时，可以向 mixin 传递参数，从而实现样式的动态生成。例如：
-- -------------------- ---- ------- ------ ------------ -------- - ------ ------- ------- -------- - ---- - -------- ----------- ------- ----------------- -------- -
在上面的代码中，我们定义了一个名为 size 的 mixin，它接受两个参数，用于设置元素的宽度和高度。然后我们使用 @include 关键字，向 mixin 传递了两个具体的参数值。
总结
通过学习使用 SASS 的 @extend 和 @include 关键字，可以大大提高代码的复用性和可维护性。同时，熟练掌握这两个关键字，还可以加快代码开发速度，提高工作效率。因此，大家都应该尝试使用 SASS，并且掌握其中的核心特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a769a7add4f0e0ff079b84