css变量无法直接实现层级缩放，必须通过font-size、padding等可计算属性结合calc()显式应用缩放系数，transform:scale()不支持calc表达式，且需同步调整缩放与缩进以避免视觉断裂。
不能用 CSS 变量直接实现“层级缩放”——变量本身不触发缩放行为，真正起作用的是 transform: scale() 或字体尺寸、间距等可变属性。所谓“层级缩放”，实际是按深度动态调整子菜单的尺寸、文字大小或内边距，而 CSS 变量只是承载缩放系数的容器。
为什么 calc(var(--scale-factor) * 1em) 不会缩放元素
CSS 变量不能直接驱动 transform 或 font-size 的“乘法缩放”，除非你显式绑定到支持计算的属性上。写 font-size: calc(var(--scale-factor) * 1em) 是合法的，但 transform: scale(calc(var(--scale-factor))) 在所有浏览器都不生效——scale() 不接受 calc 表达式作为参数。
- 真正能响应 calc 的属性：
font-size、padding、margin、width、height等长度类属性 -
transform、opacity、z-index这类非长度属性，无法用 calc 动态计算其值（即使语法看似合理） - 想让三级菜单比二级更小？得靠
font-size或line-height降级，而不是幻想scale(0.9)能被变量驱动
用 --menu-scale 变量控制字体与间距缩放
把缩放逻辑拆解为可计算的物理尺寸，才是可靠路径。例如定义每级缩放比为 1 → 0.92 → 0.85，再映射为 font-size 和 padding 值：
:root {
--menu-scale-1: 1;
--menu-scale-2: 0.92;
--menu-scale-3: 0.85;
}
<p>.menu-root .el-menu-item,
.menu-root .el-submenu__title {
font-size: calc(14px <em> var(--menu-scale-1));
padding: calc(8px </em> var(--menu-scale-1)) calc(16px * var(--menu-scale-1));
}</p><p>.menu-root .el-menu--inline .el-menu-item,
.menu-root .el-menu--inline .el-submenu__title {
font-size: calc(14px <em> var(--menu-scale-2));
padding: calc(8px </em> var(--menu-scale-2)) calc(16px * var(--menu-scale-2));
}</p><p>.menu-root .el-menu--inline .el-menu--inline .el-menu-item,
.menu-root .el-menu--inline .el-menu--inline .el-submenu__title {
font-size: calc(14px <em> var(--menu-scale-3));
padding: calc(8px </em> var(--menu-scale-3)) calc(16px * var(--menu-scale-3));
}</p>
- 缩放必须落实到具体单位（px、em、rem），不能只写
var(--menu-scale-2)后直接跟单位 - 避免用
em做基数——它会继承父级 font-size，导致多层嵌套时指数级衰减（比如 0.92 × 0.92） - 推荐用固定基准（如 14px）乘以变量，保证每级缩放可预测、可调试
缩放 + 缩进必须同步，否则视觉断裂
如果只缩放字体却不缩放 margin-inline-start，子菜单项文字会撞到左侧边界；反之，只缩进不缩放，层级间大小对比失衡。二者必须成对调整：
- 缩进量也应基于同一缩放因子：
margin-inline-start: calc(var(--indent-step) * (N - 1) * var(--menu-scale-N)) - 但注意：CSS 不支持在 calc 中嵌套多个 var() 作乘法（
calc(var(a) * var(b))无效），所以需提前算好组合值，或改用 class 分层控制 - 最稳方案：为每级单独定义缩放后缩进，例如
.menu-item--level-2 { margin-inline-start: calc(16px * 0.92); } - 别试图用 JS 注入 style 属性动态设缩放——破坏 CSS 可维护性，且 SSR 场景下首屏错乱
真正难的不是写几行 calc，而是确保缩放后的文字可读、点击区域不缩水、RTL 下 margin-inline-start 仍对齐、以及所有层级在高缩放比屏幕（如 125% 系统设置）下不重叠——这些细节没法靠变量自动解决，得逐级测、逐级调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
