直接改--btn-color不会让.btn:hover变色，除非在:hover规则中显式引用或通过变量链赋值；因css自定义属性无状态继承，生效前提是所有颜色属性均用var()调用，且悬停、禁用、深色模式需分别在对应伪类或媒体查询中独立声明变量。
直接改 --btn-color 不会让 .btn:hover 变色——除非你在 :hover 规则里显式用它，或者把颜色逻辑写进变量链里。
为什么 .btn:hover 总是不响应 --btn-color？
因为 CSS 自定义属性本身不触发状态继承；--btn-color 定义在哪、用在哪，完全取决于你写的规则是否主动引用它。
- 常见错误：只在
:root里设--btn-color: #007bff，但按钮背景仍写死为background-color: #007bff，变量就等于没用 - 真正生效的前提：所有用到该颜色的地方（文字、背景、边框）都得写成
color: var(--btn-color)、background-color: var(--btn-bg)这类形式 - 悬停态必须单独处理：
.btn:hover { --btn-bg: #0056b3; }才能让后续background-color: var(--btn-bg)动起来 - IE 不支持伪类中修改自定义属性，这种链式写法在旧浏览器里会退化为静态值
怎么给禁用态和深色模式分别配色？
禁用态和深色模式不是“同一套变量切换两次”，它们作用域和触发条件完全不同，得分开声明。
- 禁用态应直接写在元素上：
button:disabled { --btn-color: #6c757d; --btn-bg: #e9ecef; }，别指望父容器传值——:disabled是元素级状态 - 深色模式用
@media (prefers-color-scheme: dark)在:root或body.dark中覆盖变量，例如：:root { --btn-bg: #0d6efd; } @media (prefers-color-scheme: dark) { :root { --btn-bg: #1a75e0; } } - 注意 iOS Safari 12.2 以下不支持
prefers-color-scheme，需要 fallback 到data-theme="dark"手动控制 - 禁用态慎用
opacity: 0.5——它会让子内容也变灰、无法被pointer-events精细控制；变量改色更可控
要不要用 CSS 变量替代 Less/Sass Mixin？
看场景：需要运行时动态换肤（比如用户手动切主题），用 CSS 变量；需要编译期颜色运算（如 lighten($color, 10%)），就得靠预处理器。
- CSS 变量没法做
lighten()、fadeout()这类函数运算，所有明暗推导必须提前算好写死 - Less Mixin 编译后是静态 CSS，无运行时开销，还能被 PurgeCSS 安全识别；CSS 变量则依赖浏览器解析，且可能残留未用变量
- 想让
.btn-danger:hover的背景是darken(#dc3545, 15%)？这个操作必须在 Less 编译阶段完成，CSS 变量做不到 - 主题切换若靠 JS 切换 CSS 变量，会频繁触发重绘；而多主题 Less 方案可输出独立 CSS 文件，按需加载更稳
变量不是魔法开关，它只是个值容器——真正起作用的是你在哪里读它、怎么覆盖它、有没有被更高优先级规则压掉。最常被忽略的点：变量名功能导向（比如 --color-accent），而不是语义绑定（比如 --color-blue-500），否则换主题时名字就成谎言了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
