如何在SCSS中创建可跨多文件复用的全局变量？

方案一：用@use（官方推荐，SCSS 1.23.0及以上版本） #

这是SCSS现在主推的模块化导入方式，能避免变量冲突，还支持命名空间管理。

1. 先在Home.scss里定义好变量：

// Home.scss
$Matte-P-1: #572991;
$Matte-P-2: #7550A6;
$Matte-P-3: #68369B;

// 这里可以继续写Home.scss的其他样式代码

2. 在需要用这些变量的文件（比如component.scss、nav.scss）开头，用@use导入Home.scss：

// component.scss
@use './Home.scss'; // 路径要根据你的实际文件结构调整，比如上级目录就写../Home.scss

// 使用变量时要加上文件名作为命名空间
.btn {
  background-color: Home.$Matte-P-1;
}

嫌命名空间麻烦的话，还可以给导入的文件设置别名，或者直接取消命名空间（不推荐，容易和本地变量冲突）：

// 设置别名
@use './Home.scss' as hp;

.btn {
  background-color: hp.$Matte-P-1;
}

// 取消命名空间
@use './Home.scss' as *;

.btn {
  background-color: $Matte-P-1;
}

方案二：用@import（旧兼容方案） #

这是以前常用的导入方式，会把导入的文件内容直接合并到当前文件里，虽然兼容性好，但容易出现变量污染问题。

1. 同样在Home.scss里定义变量：

// Home.scss
$Matte-P-1: #572991;
$Matte-P-2: #7550A6;
$Matte-P-3: #68369B;

// 其他Home.scss样式代码

2. 在目标文件开头导入Home.scss，之后直接用变量就行：

// component.scss
@import './Home.scss';

.btn {
  background-color: $Matte-P-1;
}

额外建议 #

其实更合理的做法是把变量单独抽离成一个专门的局部文件（比如_variables.scss，文件名前加下划线表示这是局部文件，不会被单独编译），所有需要用变量的文件（包括Home.scss）都导入这个变量文件，这样项目结构会更清晰，维护起来也方便。

内容的提问来源于stack exchange，提问作者TVW96