在 SASS 中，我们经常需要使用变量来保存一些常用的样式属性值，以便在需要的时候可以快速地重复使用。然而，当我们的项目变得越来越庞大时，单独管理这些变量就会变得更加困难。这时，我们就需要在多个文件中使用同一个变量，以确保项目的可重用性和一致性。在这篇文章中，我们将学习如何在 SASS 中调用其他文件中的变量。
方法一：使用 @import 导入变量文件
SASS 提供了 @import 指令，可以方便地将其他文件中的样式代码导入到当前文件中。我们可以将所有的变量都保存在一个单独的 _variables.scss 文件中，并在需要使用这些变量的文件中通过 @import 指令将其导入。
例如，假设我们有一个 _variables.scss 文件，其中保存了一些常用的样式变量：
$primary-color: #007bff; $secondary-color: #6c757d;
我们可以在其他文件中通过 @import 指令将其导入：
// styles.scss
@import 'variables';
body {
background-color: $primary-color;
color: $secondary-color;
}在上面的例子中，我们首先引入了 _variables.scss 文件，然后使用其中的 $primary-color 和 $secondary-color 变量设置了 body 元素的背景色和文本颜色。
方法二：使用 @use 导入变量文件
除了 @import 指令外，SASS 还提供了 @use 指令，可以更加灵活地引入其他文件中的代码。与 @import 不同的是，@use 指令会将导入的文件作为一个模块来处理，可以避免命名冲突和重复导入的问题。
如果我们要使用 @use 指令导入变量文件，需要将 _variables.scss 文件改成 variables.scss 文件，并在其中声明一个命名空间：
-- -------------------- ---- ------- -- -------------- --------------- -------- ----------------- -------- -- -------- ---- ------------ -- --------- --------------------- -------------------
然后在需要使用这些变量的文件中，使用 @use 导入这个文件并指定命名空间：
// styles.scss
@use 'variables' as var;
body {
background-color: var.$primary-color;
color: var.$secondary-color;
}在上面的例子中，我们使用 as 关键字将 variables 文件导入为 var 命名空间，并通过 $primary-color 和 $secondary-color 变量设置了 body 元素的背景色和文本颜色。
结论
通过使用 @import 或 @use 指令，我们可以很容易地在 SASS 中调用其他文件中的变量，以方便地重复使用和管理。不过需要注意的是，选择不同的导入方式会对样式库的结构和管理方式有所不同，需要根据项目的具体情况进行选择和调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6717d355ad1e889fe223fca4