scss @use 变量

### 如何在 SCSS 中使用 `@use` 规则导入和使用变量

#### 定义全局变量文件
创建一个用于存储全局变量的 SCSS 文件，例如 `_variables.scss`。在这个文件里定义所需的变量：

// _variables.scss
$header-color: #333;
$body-bg: #f9f9f9;

#### 在其他 SCSS 文件中引入并使用这些变量
为了确保样式表中的 `@use` 规则位于适当的位置——即除了 `@forward` 外的所有规则之前[^1]，可以在另一个 SCSS 文件（比如 `styles.scss`）顶部通过如下方式加载上述定义好的变量文件：

// styles.scss
@use 'path/to/_variables';

body {
  background-color: variables.$body-bg; /* 注意这里要加上命名空间 */
}
h1 {
  color: variables.$header-color;
}

需要注意的是，当使用 `@use` 来引用含有全局变量的文件时，如果目标 `.scss` 或者 `.module.scss` 文件也被其他的 `.scss` 文件所依赖，则应该显式地再次利用 `@use` 去包含该全局变量文件以避免潜在错误[^2]。

对于希望导出特定于组件样式的模块化 CSS 文件来说，在 Vue 组件内可以通过设置 Webpack 的额外数据配置项 (`additionalData`) 让所有的 SASS 编译都自动带上对公共部分如全局变量文件的引用。不过这一步骤通常是在构建工具层面完成而非直接写入业务逻辑代码之中。

另外，为了让 JavaScript 能够访问某些 SCSS 变量，可以采用特殊的方式将它们暴露出来供 JS 使用。具体做法是借助 `:export` 关键字，并遵循一定的命名约定使得最终生成的对象属性名适合被 JS 解析[^3]。

最后提醒一点关于函数形式声明语法的内容虽然不是直接关联到变量传递上，但是也属于扩展知识点的一部分：SCSS 支持通过 `@mixin` 创建可重用的功能片段，允许传参甚至设定默认值[^4]。