直接用var(--width)设宽高会失效，因css变量值若无单位（如200）则width: 200非法，整条规则被丢弃；必须确保变量定义时自带单位（如'240px'），且作用域正确。
为什么直接用 var(--width) 设置宽高会失效
浏览器把 var(--width) 当作一个纯字符串代入，如果变量值是 200（没单位），CSS 就收到 width: 200 —— 这不是合法长度声明，整条规则被丢弃。你看到元素没变化，不是 JS 没执行，而是 CSS 根本没认这个值。
- ✅ 正确做法：JS 中必须带单位赋值，比如
el.style.setProperty('--width', '240px') - ✅ 或在 HTML style 属性里写死带单位：
style="--width: 320px; --height: 180px;" - ❌ 错误示范：
el.style.setProperty('--width', 240)或style="--width: 240" - ⚠️ 不推荐拼单位：
width: calc(var(--width-num) * 1px)增加冗余，且--width-num为非数字时 calc 会静默失败
calc() 怎么配合变量做动态尺寸计算
calc() 本身不“动态”，它只负责算一次；真正动态的是变量值——只要 JS 更新了 --width，calc() 就自动重算。但要注意语法容错极低。
- ✅ 推荐写法：
width: calc(var(--width) * 0.8);（前提是--width是300px这种带单位的值） - ✅ 灵活组合：
height: calc(var(--base-height) + 2rem - var(--gap));，所有变量都需含单位 - ❌ 错误组合：
width: calc(100% / var(--col-count));—— 若--col-count是4（无单位），除法运算非法，整条声明失效 - ⚠️ 注意乘除限制：CSS 中
calc()允许数值 × 长度（如2 * 16px），但不允许长度 × 长度（100px * 20px报错）
编辑器里拖拽缩放组件时，如何避免布局抖动
编辑器场景下频繁读写尺寸（比如拖拽中不断查 offsetWidth 再设 --width）极易触发强制同步布局，造成卡顿或跳变。
- ✅ 安全模式：只在
requestAnimationFrame回调里读取尺寸、单次更新变量：el.style.setProperty('--width', newW + 'px') - ✅ 防抖更新：拖拽中用
setTimeout节流，仅在松手后更新最终值，中间用 transform 模拟缩放（不触发布局） - ❌ 危险操作：循环中交替执行
el.offsetWidth和setProperty，浏览器被迫反复重排重绘 - ⚠️ 别忽略父容器：若组件父级用了
flex或grid，且子元素同时设了width和flex-basis，变量更新可能被后者截断，宽度不变
怎么让变量更新真正生效，而不是“看起来没变”
变量改了但尺寸不动？大概率是作用域或继承链断了。CSS 变量不是全局广播，它得能被目标元素“看到”。
- ✅ 根作用域最稳：
document.documentElement.style.setProperty('--width', '200px')，确保所有元素可继承 - ✅ 局部控制更准：给编辑器画布容器加
style="--width: 500px"，组件用width: var(--width)，避免污染全局 - ❌ 作用域错误：
document.body.style.setProperty()—— body 不是 :root，子元素拿不到这个变量 - ⚠️ 调试技巧：Chrome DevTools → Elements 面板里右键元素 → “Force element state” → 勾选
:hover，看变量是否还在 computed 样式里；或者临时加outline: 1px solid red确认样式是否命中
实际项目里最常被忽略的点是：变量值单位和作用域必须同时正确，缺一不可。少写一个 px，或多套一层没必要的 calc()，都会让整个动态逻辑静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
