在前端开发中，使用 Sass 可以让我们更高效地编写 CSS，其中调用变量是提高代码复用性和可维护性的关键技巧之一。在本文中，我们将介绍 Sass 中调用变量的几种技巧，希望可以帮助读者优化自己的 Sass 代码。
什么是 Sass 变量？
在 Sass 中，变量是一种类似于 JavaScript 变量的东西，用于存储值并在整个 Sass 文件中引用。Sass 变量以 $ 开头，例如：
--------------- --------
直接调用变量
最简单的调用 Sass 变量的方式是直接使用变量名，例如：
--- - ----------------- --------------- -
这样，我们就可以在整个文件中通过 $primary-color 来调用这个色值了。
嵌套调用变量
在 Sass 中，我们可以使用嵌套规则来组织 CSS 代码，提高可读性。当嵌套规则中存在变量时，我们可以直接使用变量名，或者使用父选择器 $& 来调用变量。
例如，以下代码中，我们可以通过 $background-color 来调用背景色，通过 $& 来调用父选择器（在这里是 .btn），从而实现按钮背景色的变化：
---- -
------------------ --------
----------------- ------------------
------- -
------------------ --------
----------------- ------------------
-
-------- -
------------------ --------
----------------- ------------------
-
-使用 !default 设置默认值
在 Sass 中，如果变量已经被定义过一次，再次定义该变量时，将会覆盖之前的值。但是，我们可以使用 !default 关键字来定义默认值，保证只有在变量未被定义时才会被赋值。例如：
--------------- - ---------
如果在后面的代码中未定义 $border-radius 变量，则 $border-radius 的值将为 0。如果有定义，则以最后一次定义为准。
通过 map 调用变量
Sass 还支持使用 map 来存储多个变量。map 是一种集合类型，可以将多个键值对存储在一起。例如，以下代码中定义了一个包含多个颜色变量的 map：
-------- - ------ -------- -------- -------- ------- ------- --
我们可以使用 map-get() 函数来调用 map 中的值。例如：
---- - ------- ---------------- ------- ------ ------- -
这样， .btn 的颜色将被设置为 $colors map 中 red 对应的值 #ff0000。
总结
在 Sass 中，调用变量是一种提高代码复用性和可维护性的重要技巧。本文介绍了直接调用变量、嵌套调用变量、使用 !default 设置默认值和通过 map 调用变量等多种方式，希望读者可以在实际项目中加以运用，优化自己的 Sass 代码。
示例代码：
--------------- --------
--- -
----------------- ---------------
-
---- -
------------------ --------
----------------- ------------------
------- -
------------------ --------
----------------- ------------------
-
-------- -
------------------ --------
----------------- ------------------
-
-
--------------- - ---------
-------- -
------ --------
-------- --------
------- -------
--
---- -
------- ---------------- -------
------ -------
-来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66479802d3423812e4620094