按钮尺寸变量应定义在 :root 伪类中以实现全局统一管理；通过基础变量（如 --btn-height-base）配合 calc() 派生 sm/md/lg 尺寸；响应式用媒体查询重设 :root 变量；动态修改优先用 class 切换，避免高频 setProperty。
按钮尺寸变量该定义在哪个作用域？
全局统一管理的前提是变量可被所有按钮组件访问，所以必须定义在 :root 伪类里。如果只写在某个 class 或组件内部，子元素无法继承，后续修改就失去意义。
常见错误是把尺寸变量放在 .btn 选择器里：.btn { --btn-height: 40px; }——这样每个按钮实例都得重新声明，完全违背“统一管理”初衷。
正确做法是：
:root {
--btn-height: 40px;
--btn-padding-y: 12px;
--btn-padding-x: 24px;
--btn-font-size: 14px;
}
这样任意按钮只需 height: var(--btn-height) 就能同步生效。
如何用变量控制不同尺寸等级（sm/md/lg）？
不能只靠一个固定值，得建立映射关系：用基础变量控制默认尺寸，再用派生变量覆盖特定状态。比如 --btn-height-md 是基准，--btn-height-sm 和 --btn-height-lg 基于它计算。
推荐写法：
:root {
--btn-height-base: 36px;
--btn-height-sm: calc(var(--btn-height-base) * 0.8);
--btn-height-md: var(--btn-height-base);
--btn-height-lg: calc(var(--btn-height-base) * 1.3);
}
然后按钮类直接引用：
.btn-sm { height: var(--btn-height-sm); padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm); }.btn-lg { height: var(--btn-height-lg); }
注意：别用 em 或 rem 直接乘，CSS 变量不支持单位运算，calc() 是唯一安全方式。
响应式下怎么切换按钮尺寸变量？
媒体查询中重定义变量即可，无需重复写整套样式。这是 CSS 变量最实用的点——一次声明，多处响应。
例如小屏收窄按钮内边距：
@media (max-width: 768px) {
:root {
--btn-padding-x: 16px;
--btn-font-size: 13px;
}
}
所有用 var(--btn-padding-x) 的按钮自动收缩，包括 .btn-sm 和 .btn-block 等衍生类。
容易踩的坑：
- 在媒体查询里改
.btn的padding值，而不是变量——这会让变量失效，维护成本翻倍 - 把响应式变量写在组件局部作用域（如
.header .btn），导致其他区域按钮不受影响
JavaScript 动态修改按钮尺寸变量要注意什么？
运行时用 document.documentElement.style.setProperty() 修改 :root 变量确实可行，但要小心副作用。
比如执行：document.documentElement.style.setProperty('--btn-height', '48px')，所有按钮会立刻变高——包括弹窗按钮、表格操作按钮等你可能没意识到的地方。
建议：
- 只在明确需要全局调整时才动
:root；局部变化优先用 class 切换（如.btn--compact） - 避免高频修改，比如在
scroll事件里反复 setProperty，会触发大量重排 - 调试时用浏览器开发者工具的
:root节点直接编辑变量，比写 JS 更快验证效果
真正难的不是定义变量，而是想清楚哪些尺寸该全局联动，哪些该解耦。比如图标按钮的 width 和文字按钮的 min-width 是否共用同一套变量——这里往往要拆成两组，否则一个改，另一个就崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
