DevTools搜不到变量名说明未声明或拼写/作用域错误；应先用Ctrl+F全局搜索确认定义位置与命名一致性，再检查是否误在:root声明业务变量导致全局污染。
DevTools 里搜不到变量名，先查定义位置和拼写
浏览器不报错，但变量名一拼错，var(--x) 就静默失效。最直接的验证方式是打开 DevTools 的 Computed 面板，搜索 --your-var-name —— 如果完全没结果，说明它根本没被声明，或名字/作用域对不上。
排查步骤：
- 用 Ctrl+F 在项目中全局搜索
--bg、--color-primary这类泛化名，确认所有定义处是否一致（连字符数、大小写、有无空格） - 重点检查
:root、html、body等全局选择器下有没有重复定义；Vue 的<style scoped>对--*完全无效，别信“scoped 能隔离变量” - 编辑器语法高亮可能误判，不能依赖；实际生效的只有最终编译/加载后 CSS 中真实存在的声明
为什么改了 .button 的 --bg，整个页面 div 都变蓝了？
CSS 变量是全局级联的，不是局部作用域。你写 .button { --bg: #007bff; }，这个 --bg 仍会向上透传到祖先节点，只要其他地方用 var(--bg)，就可能取到它——尤其当 :root { --bg: blue } 后加载时，所有未限定作用域的引用都会被覆盖。
典型污染链：
立即学习“前端免费学习笔记（深入）”；
-
:root定义了--bg→ 全局生效 - 某个组件（如
.user-card）也定义了--bg，但没加前缀 → 意外覆盖全局或其他组件 - 第三方库（如 antd）内部也用
--bg→ 加载顺序决定谁赢，无法预测 - 构建工具（Vite / Webpack）不做变量命名空间处理，
postcss-custom-properties只做值替换，不加隔离
怎么让 --user-card-bg 只在 .user-card 内生效？
靠声明位置，不是靠名字。CSS 变量的作用域由它在哪声明决定：:root 下是全局，.user-card 规则块内就是局部。
正确写法：
.user-card {
--user-card-bg: #f8f9fa;
--user-card-border-radius: 8px;
}
.user-card__avatar {
background-color: var(--user-card-bg);
border-radius: var(--user-card-border-radius);
}
关键点：
- 禁止在
:root或单独variables.css里声明业务变量（如--user-card-bg），否则等于主动污染全局 -
--button-bg不如--user-card-bg安全——前者暗示“按钮通用”，但项目里很快会出现modal-button、form-button，冲突概率飙升 - 修饰符变量要对齐类名：
user-card--compact对应--user-card-compacted-padding，而非--compact-padding
Less/Sass 中变量冲突为何更难发现？
Less 的 @import 是文本拼接，所有变量扁平合并进一个作用域，后定义者静默覆盖前一个，且不报错。Sass 的 @import 同理；而 Dart Sass 的 @use 才真正隔离命名空间。
对比：
- Less：两个文件都定义
@primary-color: red;→ 后者生效，但 DevTools 里只显示最终值，找不到源头 - Sass
@import：同名$z-index-modal被覆盖，且同一文件被重复解析多次，生成冗余 CSS - Sass
@use：必须写colors.$primary才能访问，$primary直接报错，从机制上杜绝冲突 - 迁移坑：把
@import改成@use不够，路径不能带.scss或下划线，!default行为也变了
!important 或重写选择器，先 Ctrl+F 查两遍变量名，再看它到底在哪声明、被谁覆盖。 
