SCSS中$variable在某文件不可用的根本原因是变量作用域不跨@import/@use边界：@import已废弃且顺序敏感，@use需显式命名空间访问（如variables.$color-primary）或@use "x" as *；混用二者会导致模块化失效。
SCSS 中 $variable 为什么在某个文件里用不了？
根本原因不是“没声明”，而是 SCSS 的变量作用域遵循 CSS 预处理器的嵌套规则：变量只在声明它的块级作用域（@mixin、@function、@if 等内部）或文件作用域内有效，且 不会自动跨 @import 或 @use 边界传播。
常见错误现象：Undefined variable: "$color-primary". 出现在被 @import 的文件中，但变量明明定义在 _variables.scss 里 —— 这说明该文件没被正确引入，或引入方式不支持变量共享。
-
@import已废弃，它会把内容拼接进当前作用域，看似“全局”，实则顺序敏感、易覆盖、无法控制命名冲突 -
@use是现代方案，变量默认是私有的；必须显式用as *或as $prefix-才能访问 - 如果用了
@use "variables"，必须写variables.$color-primary，不能直接写$color-primary
怎样让 $spacing-sm 在所有模块里都能用？
唯一可靠的方式是统一通过 @use 导入并暴露为命名空间，再在需要的地方引用。不要依赖隐式全局。
操作步骤：
立即学习“前端免费学习笔记（深入）”；
- 在
_variables.scss顶部加@forward "functions" as fn-*（如有函数），但变量本身不 forward，只靠@use暴露 - 在入口文件（如
main.scss）中写：@use "variables" as v; - 在组件文件中也必须单独
@use "variables" as v;，不能省略 —— SCSS 不支持“继承父文件的 use” - 若想简化调用，可用
@use "variables" as *;，此时$color-primary可直接用，但要注意命名冲突风险
示例：
@use "variables" as *;<br>button { padding: $spacing-sm; }
@use 和 @import 混用会导致变量突然失效？
会，而且非常隐蔽。SCSS 编译器遇到 @import 时会降级为旧模式，整个文件及其依赖都失去 @use 的模块化能力，变量作用域退化为扁平拼接，容易出现重复定义或覆盖。
- 错误做法：
@use "variables"; @import "component";——component.scss无法访问variables中的变量 - 正确做法：全部改用
@use，连第三方库（如sass:math）也要用@use "sass:math" - 迁移时注意：
@import "bootstrap/scss/functions"要换成@use "bootstrap/scss/functions" as bs-fn，路径和别名必须匹配
局部变量什么时候该用 !global？
极少情况。只有当你在 @mixin 或 @function 内部动态生成一个需供外部读取的配置（比如运行时计算的主题色），才考虑 $var: value !global;。
- 99% 的场景下，
!global是反模式：破坏封装、难以追踪、与@use命名空间冲突 - 如果只是想在 mixin 里临时覆盖某个值，用参数传入更安全：
@mixin card($bg: $color-surface) { background: $bg; } -
!global声明的变量仍受文件引入顺序影响，且无法被@use的命名空间隔离
真正难处理的，是团队协作中有人坚持用 @import、有人用 @use，导致同一项目里变量时有时无 —— 这不是语法问题，是规范落地问题。
