直接改:root里的变量值可实时预览颜色变化，但需确保变量定义在:root中、用color/background-color等原子属性引用、避免嵌套var()、拼写正确且浏览器支持到位。
直接改 :root 里的变量值，就能实时看到页面颜色变化——但前提是变量定义位置对、引用方式对、浏览器支持到位。不是所有写法都“改了就生效”。
变量必须定义在 :root 里，不能塞进组件选择器
很多人把 --primary-color 写在 .card { --primary-color: #4f46e5; } 里，然后在 p 标签里写 color: var(--primary-color);，结果没反应。这是因为 CSS 变量作用域只在声明它的选择器及其后代内生效，p 不在 .card 内部，自然拿不到。
- 所有主题色变量统一放在
:root下，比如:root { --color-bg: #ffffff; --color-text: #1f2937; } - 别用
.theme-dark { --color-bg: #111827; }这种写法来“覆盖”——它只是新增一组变量，并不会替换:root的值，除非你同时移除或重设:root的同名变量 - 如果真要按主题类切换，应该让不同 class 都去设置同一组变量：比如
.theme-light { --color-bg: #fff; }和.theme-dark { --color-bg: #111; }，再配合document.documentElement.className = 'theme-dark'动态切
引用变量时用原子属性，别用复合属性
background: var(--bg); 看似简洁，但容易静默失败。浏览器对 background 这类简写属性里的变量解析不严格，尤其旧版 Safari 会直接丢弃整条声明，控制台还不报错。
- 改用
background-color: var(--bg);、border-color: var(--border);、color: var(--text);这类明确到单一通道的属性 - 避免
rgba(var(--r), var(--g), var(--b), 1)——嵌套var()在所有主流浏览器都不被支持，整条声明会被忽略 - 想带透明度？直接用
--bg: rgba(255, 255, 255, 0.8);或--bg: #ffffffcc;，然后background-color: var(--bg);
Chrome / Edge 里点一下就能调色，但得知道点哪
不是双击颜色文字，也不是点变量名本身，而是悬停后出现的小色块——点了才弹出取色板。这个操作能绕过手敲 HEX 或 HSL，实时拖滑块调亮度、饱和度、透明度。
- 在 Styles 面板里找到类似
color: var(--text);的行，鼠标移到--text右侧那个小方块上，点开即可编辑变量值 - 如果是
background-color: #4f46e5;这种硬编码，点颜色值旁的色块也能调，但改的是字面值，不联动变量 - Firefox 需确认
devtools.inspector.colorPicker.enabled是true，否则只显示文本框 - VS Code 里改文件再保存，不会触发浏览器实时更新——那是文件系统行为；开发者工具里改
:root变量才是运行时重计算
加过渡动画要有针对性，别乱加 transition
CSS 变量本身不能被过渡，transition: --color-bg 0.3s; 是无效的。真正能动的是它驱动的属性，比如 background-color 或 color。
- 给目标元素加上
transition: background-color 0.2s, color 0.2s;，再改--bg或--text，视觉上才有淡入淡出 - 别对
box-shadow: 0 0 4px var(--shadow);加transition: box-shadow——多数浏览器不支持变量驱动的阴影过渡，容易卡顿或跳变 - 渐变过渡可以做：
background: linear-gradient(var(--start), var(--end));+transition: background 0.3s;，但注意 Firefox 对这个的支持比 Chrome 更稳
最常被忽略的一点：变量拼错（比如 --priamry-color）或大小写不一致（--Color-Primary vs --color-primary），浏览器完全静默处理，既不报错也不回退提示，只会用继承值或初始值顶上。调试时先盯一眼变量名是否完全一致，比查样式层叠逻辑更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
