@use能真正切断变量污染链，因其强制创建私有命名空间，所有变量必须显式前缀访问（如colors.$primary），直接写$primary报错；而@import是文本拼接，同名变量后导入者静默覆盖前者，无边界检查、无报错。
为什么@use比@import能真正切断变量污染链
@import本质是文本拼接，把整个文件内容原样塞进当前作用域，没有任何命名边界。两个文件都定义$z-index-modal: 1000，后@import的直接覆盖前一个，编译器不报错、DevTools只显示最后一处位置。而@use默认创建私有命名空间：所有变量、@mixin、函数必须显式加前缀访问，比如colors.$primary，直接写$primary会报Undefined variable "$primary"——这不是建议，是硬性编译错误。
@use下变量和mixin怎么调用才不会失效
常见错误是把@import "variables"替成@use "variables"就以为完事，结果所有引用还写$primary-color，必然失败。正确做法必须带命名空间：
-
@use "src/styles/variables" as v→ 调用时写v.$primary-color - 路径不能带扩展名或下划线：
@use "src/styles/variables"✅，@use "src/styles/_variables.scss"❌ - 同一文件多次
@use "utils"只解析一次，但@use "utils" as u1和@use "utils" as u2会被视为两个独立命名空间，u1.$x和u2.$x互不可见 -
!default在@use中只生效一次，旧写法里反复回退赋值的逻辑彻底失效
为什么%placeholder比@mixin更适合避免选择器级冲突
@mixin reset { margin: 0; padding: 0; }被调用12次，就生成12份相同CSS规则，且如果里面写了.icon，还可能意外覆盖全局.icon。而%reset { margin: 0; padding: 0; }本身不输出任何CSS，只在@extend %reset处按需注入一次，天然防泄漏。但注意：
-
%不能用于插值选择器，比如.u-p-#{$n}里写@extend %p-#{$n}会报"%placeholder is not a valid selector" - 跨文件使用必须先
@use或@forward引入当前作用域，否则@extend找不到目标 -
%不暴露真实类名，所以不会和HTML中class="sr-only"产生意外匹配
CSS变量（--*）和Sass变量（$*）的冲突机制完全不同
Sass变量冲突发生在编译阶段，靠@use命名空间就能隔离；但CSS自定义属性--color是运行时全局作用域，谁后定义谁生效，@use对它完全无效。要防这类冲突：
- 必须加语义化前缀，比如
--user-card-bg而不是--bg - 靠声明位置限定作用域：
.user-card { --user-card-bg: #fff; }，这样变量只在该选择器内生效 -
<style scoped></style>对--*完全无效，Vue单文件组件里加了也没用 - 构建工具如Vite默认不处理CSS变量作用域，
postcss-custom-properties只做值替换，不加命名空间
真正的难点不在语法切换，而在所有引用点是否同步更新命名空间——漏掉一个v.前缀，变量就静默失效，编译器不会提示“你可能忘了加前缀”，只会报错或输出空值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
