scss变量作用域仅决定编译期变量可见性，不影响css结构；变量必须在插值点已定义且未被遮蔽，否则报错或使用旧值；#{} 是跨系统桥接强制开关，漏写导致非法css；@use创建私有作用域，需命名空间访问。
SCSS变量作用域只影响编译期值的可见性，不改变最终CSS结构
SCSS变量的作用域（文件级、选择器内、mixin参数）决定的是“在哪儿能读到$var”，而不是“生成多少CSS”或“类名是否被隔离”。一个在.card块里声明的$border-radius: 8px，只要没被插值进选择器名或属性值，它就只是个局部占位符，编译后完全消失，对输出CSS零影响。
常见错误现象：在@mixin button-theme() { $bg: red; color: $bg; }里改了$bg，但调用@include button-theme的按钮样式没变——因为$bg根本没参与计算，或者被同名参数遮蔽了。
- 变量必须在插值点已定义且未被遮蔽，否则编译报错或静默使用旧值
-
@mixin参数会覆盖同名外部变量，想透传得显式传参：@include button-theme($bg: $primary) - 嵌套规则中声明的变量默认仅对该块有效，不会污染父级或兄弟块
为什么在:root里写$var却看不到对应CSS变量？
因为$var和--var是两套系统。你在:root里写--color: $primary;，Sass不会展开它，而是原样输出--color: $primary;——这是非法CSS，浏览器直接忽略。
真正生效的写法必须用插值：--color: #{$primary};。这个#{} 不是可选语法糖，是跨系统桥接的强制开关。
- 漏掉
#{}时，DevTools的Styles面板里能看到字面量--color: $primary，但Computed里查不到值 - 如果
$primary是计算值（如darken($base, 10%)），也必须包在#{}里，否则Sass不执行计算 - 插值只发生在编译期，JS无法通过
getComputedStyle读取$primary，只能读--color
多个SCSS文件都定义$primary，最终CSS里哪个生效？
没有“覆盖”，只有“顺序优先”。Sass按@import或@use的实际解析顺序决定变量绑定时机。$primary: blue !default在A.scss里，$primary: red在B.scss里，且B先被引入，则$primary就是red；反过来，blue生效。这不是作用域问题，是构建流程的线性叠加。
更危险的是：你用#{$primary}生成--primary，结果不同文件多次输出同名CSS变量，靠层叠顺序决胜负——谁在CSS里位置靠后，谁的值就胜出。
- 全局搜索项目里所有
$primary:，尤其检查node_modules下的UI库变量文件 - 避免在多个地方用
!default声明同一变量，这会让最终值取决于构建工具配置而非代码逻辑 - 安全做法是加命名空间：
$theme-primary→--theme-primary，避开第三方冲突
为什么@use模块里的$var在外部无法直接访问？
@use默认创建私有作用域，模块内的$var不会自动暴露。你写@use "vars";后直接用$color，会报错Undefined variable。必须通过命名空间访问：vars.$color，或用as *导入全部（不推荐）。
这也意味着!default在@use模块里只对本模块生效，外部无法用with覆盖——除非你显式声明$color: null !default，并在with里提供新值。
-
@import是全局共享，@use是显式引用，二者混用会导致作用域断裂 - 模块内变量未加
!default，外部@use "vars" with ($color: red)会直接报错 - 想让变量可配置，必须在模块顶部声明
$color: #007bff !default;，再导出@forward "vars" with ($color: $color);
.dialog .header h2里声明$font-size: 1.2em，它既不会让这个h2获得特殊样式隔离，也不会阻止其他地方用同名变量。它的全部意义，只是帮你控制“哪段Sass代码能拿到哪个值”——仅此而已。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
