SASS中@use与@forward的区别及适用场景分析

核心差异 #

1. 成员访问逻辑 #

• @use 导入的模块成员默认是局部作用域，必须通过「命名空间」（默认是模块文件名，也可通过 as 重命名）访问，不会污染全局作用域。
• @forward 是将目标模块的成员「中转转发」，其他导入当前文件的样式表可直接访问这些转发成员，无需额外命名空间。

2. CSS输出规则 #

• @use 会直接把被导入模块的CSS代码合并到当前文件的输出中，只要使用 @use，被导入模块的CSS就会被输出。
• @forward 本身不会输出任何被转发模块的CSS，只有当其他文件通过 @use 导入了当前转发文件时，才会触发被转发模块的CSS合并输出。

3. 成员处理能力 #

• @use 支持用 as 给整个模块重命名（比如 @use 'utils' as tool），还能通过 with 关键字覆盖被导入模块的变量值。
• @forward 支持用 as *- 给所有转发成员统一加前缀（比如 @forward 'utils' as u-*），解决跨模块命名冲突；同时会自动忽略被转发模块中以 _ 开头的私有成员，不对外暴露。

4. 重复导入处理 #

• @use 自带去重机制，同一个模块被多次导入时，只会输出一次CSS代码。
• @forward 因为不直接输出CSS，多次转发同一模块也不会产生重复代码问题。

适用场景 #

用 @use 的场景 #

• 直接在当前样式文件中使用其他模块的功能时，比如组件样式里导入工具类模块，调用其变量、mixin或函数。
• 想要隔离模块成员、避免全局命名污染的场景，通过命名空间确保变量/函数名不会和其他模块冲突。

示例：

// _utils.scss
$primary-color: #2563eb;
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// button.scss
@use 'utils';

.button {
  background-color: utils.$primary-color;
  @include utils.flex-center;
}

用 @forward 的场景 #

• 构建样式库的统一入口时，把多个子模块（工具类、主题、组件基础样式）的成员统一转发到一个入口文件，用户只需导入这个入口就能使用所有子模块功能，无需逐个导入。
• 需要对模块成员做统一封装或命名前缀时，比如给多个工具模块的成员加上统一前缀，避免跨模块命名冲突。

示例：

// _utils.scss
$primary-color: #2563eb;
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// _theme.scss
$dark-bg: #1e293b;

// index.scss（样式库入口）
@forward 'utils' as u-*;
@forward 'theme' as t-*;

// 用户的main.scss
@use 'index';

.button {
  background-color: index.$u-primary-color;
}
.dark-container {
  background-color: index.$t-dark-bg;
}

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