在前端开发中，我们经常需要写重复的样式代码，例如设置文字颜色、背景颜色或者其他基础样式。这不仅繁琐而且容易出错。这时，我们可以使用 SASS 中的 @mixin 和 @include 来减少代码量和提高开发效率。
@mixin
@mixin 用来定义一个样式模板，类似于编程中的函数。它能够包含一组样式代码，并且可以传入参数。
例如，我们有一个基础的按钮样式：
-- -------------------- ---- ------- ---- - -------- ------------- -------- ---- ----- ------- --- ----- ----- -------------- ---- ---------- ----- ----------- ------- ------- -------- -
如果我们需要定义不同颜色的按钮，那么就需要写很多重复代码。使用 @mixin 可以方便地解决这个问题：
-- -------------------- ---- ------- ------ ----------------- - ----------------- ------- ------ ----- - -------- - -------- --------------- - ---------- - -------- ----------------- -
在上面的代码中，我们定义了一个 @mixin，它接受一个参数 $color，然后定义了背景颜色和文字颜色。在 .btn-red 和 .btn-green 中，我们使用了 @include 引入了 @mixin。这样就可以快速定义不同颜色的按钮样式了。
@include
@include 用来引入一个 @mixin，类似于编程中的函数调用。它可以传入参数。
在上面的例子中，我们已经看到了 @include 的用法。这里我们再举一个例子来说明 @include 的更多用法。
假设我们有一个基础的卡片样式：
.card {
display: flex;
flex-direction: column;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}如果我们要定义一个有图片的卡片样式，那么可以增加以下代码：
-- -------------------- ---- -------
--------- -
-------- -----
--------------- ----
------------ -------
---- -
------------- -----
-
-
--------- ---- --- -
---------- -----
-这里我们定义了一个 .card-img，它包含了图片和文字。为了去掉图片的默认边框，并让图片宽度不超过卡片宽度，我们还需要定义 .card-img .img img。
这样就太麻烦了，我们可以使用 @mixin 和 @include 来简化代码：
-- -------------------- ---- -------
------ -------- -
-------- -----
--------------- ----
------------ -------
---- -
------------- -----
--- -
---------- -----
------- -----
-
-
-
----- -
-------- ---------
-在上面的代码中，我们定义了一个 @mixin，它包含图片和文字，然后在 .card 中引入了这个 @mixin。这样就不需要再定义 .card-img 和 .card-img .img img 了。如果我们以后需要修改代码，只需要修改 @mixin 就可以了。
总结
通过使用 @mixin 和 @include，我们可以减少重复代码，提高代码复用性和开发效率。当然，在实际开发中，我们需要注意样式继承的影响，并根据具体情况增加必要的注释。
示例代码
-- -------------------- ---- -------
------ ----------------- -
----------------- -------
------ -----
-
---- -
-------- -------------
-------- ---- -----
------- --- ----- -----
-------------- ----
---------- -----
----------- -------
------- --------
--------- -
-------- ---------------
-
----------- -
-------- -----------------
-
-
------ -------- -
-------- -----
--------------- ----
------------ -------
---- -
------------- -----
--- -
---------- -----
------- -----
-
-
-
----- -
-------- -----
--------------- -------
-------- -----
----------------- -----
------- --- ----- -----
----------- - --- --- ------- -- -- -----
---------- -
-------- ---------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ae6eb048841e9894a7cd7d