@forward 仅转发模块内定义的变量、mixin 和自定义函数,不导出也不影响内置 CSS 函数(如 color-mix()、max()),因其天然全局可用;转发内置模块(如 sass:color)仅暴露其封装函数(如 adjust-color),不“启用”原生 CSS 函数。

直接说结论:@forward 本身不导出 CSS 函数(比如 lighten()、rgba()),它只转发模块的变量、混合宏(@mixin)和函数(Sass 自定义函数,即用 @function 定义的)。内置的全局 CSS 函数(如 color-mix()、max()、min())根本不需要、也不能被 @forward 导出——它们天然可用,且不受模块作用域限制。
为什么 @forward 无法“导出” color-mix() 这类函数?
Sass 的内置函数(包括新标准 CSS 函数的 Sass 封装,如 color-mix()、rgb()、hsl() 等)属于语言运行时环境的一部分,不是模块成员。它们在任何 .scss 文件中都可直接调用,无需导入或转发。
你如果在某个文件里写了 @forward "tools",而 tools.scss 里只定义了变量和 @function,那 color-mix() 依然能用——不是因为被转发了,而是因为它本来就在那儿。
-
@forward只影响模块边界:控制哪些@use后可见的成员($var、@mixin、@function)被暴露出去 - 所有内置函数(含 CSS 函数的 Sass 实现)始终全局可用,不参与模块可见性规则
- 试图在
_utils.scss中@forward "sass:color"是合法的,但只是转发了sass:color模块里的自定义封装(如adjust-color()),不是“激活”color-mix()
想统一管理并“暴露”自定义函数时,@forward 怎么写才对?
如果你自己写了 @function theme-color($name) { ... },并希望下游通过一个入口文件获得它,这才是 @forward 的正确场景。
立即学习“前端免费学习笔记(深入)”;
假设目录结构是:
scss/ ├── _index.scss ├── _functions.scss └── _variables.scss
那么 _index.scss 应该这样写:
@forward "functions" as theme-*; @forward "variables";
下游 @use "index" as i; 后就能用 i.theme-color("primary") 和 i.$brand-blue。
- 用
as theme-*可批量加前缀,避免命名冲突 - 不要在
@forward后加@use—— 转发后已等效于把目标模块内容“嵌入”当前模块,重复@use会报错"X is already used" - 若需重命名单个函数,用
@forward "functions" show theme-color as get-theme-color;
常见错误:以为转发 sass:xxx 就能“启用”CSS函数
看到文档里写 @use "sass:math" 就能用 pow(),有人会误以为必须显式 @forward "sass:math" 才能让下游用上。其实完全不必:
-
sass:math、sass:color、sass:list等是内置模块,其函数只要被任一@use或@forward触达过,就进入当前编译上下文 - 但下游文件仍需自己
@use "sass:math"才能调用math.pow()——@forward "sass:math"不会自动让下游免去这一步 - 真正有效的做法是:在入口文件(如
_index.scss)里@use "sass:color" as color;,再@forward "functions";,然后下游@use "index" as i;+@use "sass:color" as color;两行都得写
最易被忽略的一点:Sass 的模块系统不传递“依赖的依赖”。即使你 @forward 了一个用了 sass:map 的模块,下游依然要自己 @use "sass:map" 才能调用 map.get() —— 转发不会隐式提升作用域层级。


















