什么是 SASS
SASS 是一种样式表预处理器，它允许我们使用变量、函数等增强了 CSS 的特性，以便更简单且更有效地编写样式代码。通过使用 SASS，我们可以更加高效地编写 CSS，同时减少了重复的代码，提高了代码的可维护性。
什么是 Mixin
在 SASS 中，Mixin 是一种非常强大的工具，它可以简化代码并增加其可重用性。Mixin 是一种允许开发者将一块 CSS 代码声明保存作为一个语句块，并在需要的地方使用它的机制。
使用 @mixin 关键字
使用 Mixin 可以简化代码，增加可重用性并提高代码的可维护性。在 SASS 中使用 @mixin 关键字，可以将 Mixin 定义为一段代码块，并在需要的地方将其调用。
使用 @mixin 定义 Mixin：
@mixin mixinName {
property1: value1;
property2: value2;
property3: value3;
...
}使用 @include 调用 Mixin ：
@include mixinName;
下面的代码展示了如何在 SASS 中使用 @mixin 关键字：
-- -------------------- ---- -------
------ ---------------- -
------------------- -----
---------------- -----
----------- -----
-
-----
-------- ------------ - ---- ---------------
-上述代码中，通过 @mixin 关键字定义了一个 box-shadow 的 Mixin，并在 .box 选择器中使用 @include 调用该 Mixin。
这个例子的结果将会产生以下代码：
.box {
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.5);
-moz-box-shadow: 0 0 10px rgba(0,0,0,.5);
box-shadow: 0 0 10px rgba(0,0,0,.5);
}变量与 @mixin 一起使用
在 SASS 中，我们可以将 Mixin 嵌套，并使用所定义的变量对其进行修改。
例如，可以在一个 Mixin 中定义变量，然后在另一个 Mixin 中使用该变量：
-- -------------------- ---- -------
------ ----------------------- ------------ -
----------------- ----------
------ ------------
-
------ ---------- -
---------- -----
-------- ------------------ ------
-
------- -
-------- ------------------ ------
-
----------- -
-------- -----------
-在上面的代码示例中，我们使用变量 $bg-color 和 $text-color 定义了 button-style Mixin，并在 big-button Mixin 中使用 @include 调用该 Mixin。最后，我们在 .button 和 .big-button 选择器中分别调用这些 Mixin。
运行上面的代码，将会生成以下代码：
-- -------------------- ---- -------
------- -
----------------- -----
------ -----
-
----------- -
---------- -----
----------------- -----
------ -----
-总结
SASS 的 @mixin 关键字是一种非常强大的工具，它可以帮助您简化代码、提高可重用性以及提高代码的可维护性。使用 Mixin，我们可以将大量的 CSS 代码组织成易于管理和调用的代码块，可以更好地管理我们的样式表代码。无论您是新手还是经验丰富的开发者，都应该学习和掌握这种功能强大的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f28acaf6b2d6eab3c2de9b