!global只影响SCSS编译期作用域，与CSS封装性无关；它不破坏CSS封装性，因SCSS变量编译后消失，而CSS变量在运行时生效；真正破坏封装的是无作用域类名或未隔离的:root声明。
!global只影响SCSS编译期作用域，和CSS封装性无关
它根本不会“破坏CSS的封装性”，因为SCSS变量和CSS变量是两套完全隔离的系统。$color-primary在编译后就消失了，--color-primary在浏览器里才开始工作。你用!global提升一个SCSS变量的作用域，对生成的CSS是否局部化、是否污染全局、是否可复用，零影响。
真正破坏CSS封装性的是未加作用域的类名或:root声明
常见错误不是!global本身，而是借此写出无约束的输出：
- 直接在顶层写
.button { background-color: $primary; }——这个.button会全局生效，不管谁引入都覆盖 - 在
:root里用#{ $primary }插值，但没做命名空间隔离，比如--primary而非--mylib-primary - 把
@mixin theme() { :root { --color: #000; } }到处@include，导致多个模块重复注入同名CSS变量，层叠顺序不可控
!global滥用反而暴露SCSS设计缺陷
当你发现自己非得靠!global才能让某个$var被其他块读到，说明结构有问题：
- 变量定义位置太深（比如嵌套
@media或@if里），应提前抽到文件顶部或@use模块中 - 想用SCSS变量模拟运行时主题切换，但
!global无法响应用户操作——它只是编译时一次赋值 - 在
@use "theme" as t后还写$t:color !global，这语法非法；@use模块的变量必须通过t.$color访问，!global不跨模块
CSS封装性靠的是选择器作用域，不是SCSS变量作用域
想真正隔离样式，得靠：
立即学习“前端免费学习笔记（深入）”；
- CSS Modules 的
:local(.btn)自动重命名 - Shadow DOM 的天然边界
- Scoped CSS（如Vue单文件组件）的
<style scoped></style> - 手动前缀：
.my-comp-button而非.button
把精力放在选择器粒度和构建工具配置上，比纠结!global有没有“破坏封装”实在得多——后者根本不在同一层面上。
