SASS 是一种流行的 CSS 预处理器，它通过变量和 mixin 等功能帮助前端开发者提高 CSS 的可维护性和扩展性。在本文中，我们将详细介绍如何在 SASS 中配置变量和 mixin，并提供示例代码和指导建议。
变量配置
变量是 SASS 中最基础的功能之一，它可以帮助我们将一些常用的颜色、尺寸等值保存下来，方便之后的使用和修改。我们可以使用 $ 符号开头来定义一个变量，如下所示：
$primary-color: #007ac1;
上面的代码定义了一个名为 $primary-color 的变量，它的值是蓝色 #007ac1。在我们的样式表中，我们可以使用这个变量来代替颜色值。比如：
a {
color: $primary-color;
&:hover {
color: darken($primary-color, 10%);
}
}上面的代码使用了 $primary-color 变量，它在 a 标签的颜色中被调用，以及在 :hover 伪类中被调用。我们还通过 SASS 内置函数 darken 来给 $primary-color 变量变深了 10%。
除了这种单个值的变量，我们还可以定义多个值的变量，比如：
$font-size: (
normal: 1rem,
small: 0.8rem,
large: 1.2rem
);上面的代码定义了一个名为 $font-size 的变量，它的值是一个对象，包含三个键值对分别对应不同的字体大小。在我们的样式表中，我们可以通过嵌套的方式来使用这个变量，如下所示：
-- -------------------- ---- -------
- -
---------- ------------------- --------
------- -
---------- ------------------- -------
-
------- -
---------- ------------------- -------
-
-上面的代码使用了 SASS 中的 map-get 函数，用于获取 $font-size 变量中的指定值。在 p 标签中，我们可以设置默认的字体大小，而在使用了 .small 或 .large 类的 p 标签中，字体大小会分别改为小号或大号。
Mixin 配置
Mixin 是 SASS 中用于创建可重用样式的一种机制，它类似于函数的概念，可以将一些常用的 CSS 样式封装成一个 mixin，以便在需要的时候快速调用。我们可以使用 @mixin 关键字来定义一个 mixin，如下所示：
-- -------------------- ---- -------
------ ---------- -
---------
------- -
-------- ---
-------- ------
-
------- -
------ -----
-
----- --
-上面的代码定义了一个名为 clearfix 的 mixin，它包括清除浮动的 CSS 样式。我们可以通过 @include 关键字来调用 mixin，如下所示：
.container {
@include clearfix();
}上面的代码使用了 clearfix mixin，并将其应用到了 .container 类中。通过 mixin，我们可以快速应用一些常用的样式，同时也可以减少样式表的冗余。
除了这种基础的 mixin，SASS 还提供了一些高级的 mixin 功能，比如可变参数。我们可以通过在 mixin 的参数中使用 ... 符号来定义可变参数，如下所示：
-- -------------------- ---- -------
------ ------------ -------- ---------- -
------ -------
------- --------
--- ------ -
----- --------- -- ------ -
------------- ---------------------- ------------- ---------- - ------
-
-
-上面的代码定义了一个名为 size 的 mixin，它包括 width 和 height 两个必须的参数，以及可选的多个附加样式。我们可以通过以下方式调用 size mixin：
-- -------------------- ---- -------
---- -
-------- ----------- -------
-
------------- -
-------- ----------- ------ ------- ---- ----- -------
-
------------ -
-------- ----------- ----- ---------- -----------------
-上面的代码分别使用了 size mixin 并传递了不同的参数。其中的可选参数也被称为关键字参数，它们可以被解析为对象，类似于 JavaScript 的 {} 表达式。
总结
SASS 中的变量和 mixin 是一种强大的样式配置机制，它可以帮助我们实现可维护和可扩展的 CSS 代码。在配置变量和 mixin 的过程中，我们需要了解 SASS 中的语法和内置函数，同时也需要一些基础的编码技能。希望本文能够为前端开发者提供一些指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f46074f6b2d6eab3d6a87c