css变量复用需“变量+基础类+局部覆盖”三层结构，必须在:root定义语义化token、按钮类只引用不声明、用属性选择器局部覆盖，且var()必须带fallback值，否则变量未定义将导致样式静默失效。
CSS变量本身不直接生成按钮形态，真正复用靠的是「变量 + 基础类 + 局部覆盖」三层结构。单独写--btn-padding或--btn-radius没用，必须绑定到具体选择器并留出覆盖入口。
为什么直接在按钮里定义--btn-bg会失效
很多人把变量塞进.btn内部，比如.btn { --btn-bg: #007bff; background-color: var(--btn-bg); }——这会导致两个问题：一是该变量只在.btn元素自身生效，子元素拿不到；二是换主题时得挨个改每个按钮类，根本谈不上复用。
正确做法是统一收口到:root，再用属性选择器局部覆盖：
-
:root里只定义语义化基础Token：--color-primary、--radius-md、--spacing-sm - 按钮类
.btn只引用，不声明新变量：padding: var(--spacing-sm); border-radius: var(--radius-md) - 变体通过
data-variant或data-size触发覆盖：.btn[data-variant="ghost"] { --color-bg: transparent; }
var()必须带fallback值，否则样式会“消失”
裸写background-color: var(--btn-bg)风险极大。一旦变量未定义（比如构建时被PurgeCSS误删，或深色模式脚本加载失败），整个声明会被浏览器跳过，按钮可能变成透明或继承父级背景色，页面直接“破相”。
所有var()调用必须加兜底：
-
background-color: var(--btn-bg, #007bff)——颜色类变量 fallback 用具体色值 -
border-radius: var(--btn-radius, 4px)——尺寸类变量 fallback 用像素值 - 不要写
var(--btn-bg, var(--fallback-bg))，fallback 不支持嵌套var()
按钮尺寸/形状/状态不能全靠变量控制
CSS变量适合管理「静态设计Token」，但按钮的尺寸缩放、图标对齐、禁用态交互反馈等，需要真实CSS规则配合。例如：
- 尺寸差异不只是
--btn-padding变化，还涉及font-size、line-height、min-width协同——这些得写成独立类.btn--sm，而非仅靠变量驱动 -
:disabled状态必须同时设置opacity、cursor: not-allowed、pointer-events: none，单靠--btn-disabled-bg无法解决可访问性问题 - 圆角从
4px变成50%（pill形）属于形状突变，需用类名切换，不能指望--btn-radius: 50%自动适配所有场景
深色模式下var()不更新？检查@media作用域和顺序
写了@media (prefers-color-scheme: dark) { :root { --btn-bg: #333; } }但按钮颜色没变，大概率是以下两个原因：
- 媒体查询规则写在浅色
:root定义之前，被后者覆盖（CSS层叠顺序优先） - 组件内部又写了
.btn { --btn-bg: #fff; }，局部变量优先级高于:root里的媒体查询重定义 - 更稳妥的做法是用
[data-theme="dark"] :root配合JS手动切换，避免依赖用户系统偏好
最易被忽略的一点：CSS变量的动态能力只在运行时生效，Sass/Less里用@mixin包裹--btn-bg赋值，等于阉割了变量的响应性——那只是预处理器变量，不是CSS自定义属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
