Less变量应统一定义@sidebar-width和@transition-duration，用于width、transform: translateX()及transition属性，配合mixin封装动画逻辑与断点响应，确保抽屉宽度、位移、过渡一致可控。
Less变量怎么控制侧边栏抽屉的宽度和过渡时长
直接用 Less 变量定义抽屉宽度、动画时长、缓动函数，比硬编码更易维护。关键不是“能不能”，而是变量得用在对的地方——@sidebar-width 必须参与 width 和 transform 位移计算，否则断点切换时会错位。
常见错误是只用变量设 width: @sidebar-width，但隐藏时写死 transform: translateX(-280px)。一旦改了变量值，抽屉关不严，右边露缝。
-
@sidebar-width: 280px是安全起点；小屏建议改用@sidebar-width: 80vw，再加max-width: 280px防撑爆 - 过渡时长统一用
@transition-duration: 0.3s，别在不同属性里混用0.3s和300ms - 必须显式声明
transition: transform @transition-duration ease, width @transition-duration ease，否则 Less 编译后可能丢掉某一项
为什么用 Less 的 .mixin 封装抽屉动画逻辑更稳
抽屉开合常涉及多个状态（初始隐藏、滑入中、完全展开、关闭中），靠重复写 transition 和 transform 易出错。用 mixin 把共性逻辑收拢，比如位移方向、是否锁 body 溢出、是否启用 will-change，就能避免漏配。
典型坑：在移动端 mixin 里忘了加 touch-action: pan-x，iOS 上一划抽屉，页面跟着横向滚动。
立即学习“前端免费学习笔记（深入）”；
- 定义
.drawer-transition()mixin，内部包含transition、will-change: transform、transform: translateX(-100vw) - 展开态用
.drawer-open()，传参控制方向：.drawer-open(left)→translateX(0)，.drawer-open(right)→translateX(calc(100vw - @sidebar-width)) - 别在 mixin 里写
@keyframes——Less 不支持嵌套@keyframes，必须提至顶层单独定义
响应式断点 + Less 变量如何避免媒体查询和 JS 状态打架
纯 CSS 媒体查询控制抽屉显隐，和 JS 切换 sidebar--open 类，两者若没对齐，iPad 横竖屏一转，抽屉就卡在半开状态。Less 的作用不是替代 JS，而是让断点值「唯一可信」。
错误做法：CSS 里写 @media (max-width: 768px)，JS 里又用 matchMedia('(max-width: 767px)') 判断——差 1px 就不同步。
- 在
variables.less中定义@breakpoint-mobile: 768px，所有地方都引用它 - CSS 媒体查询写成
@media (max-width: @breakpoint-mobile - 1) - JS 中用
matchMedia(`(max-width: ${@breakpoint-mobile - 1}px)`)（注意：JS 需先将 Less 变量导出为 JS 可读值，或通过 data-attribute 注入） - 抽屉容器默认加
transform: translateX(-100vw)，而非translateX(-100%)，彻底规避 box-sizing 和 padding 导致的偏移
Less 编译后 CSS 为何有时抽屉动画卡顿或跳变
根本原因不是动画本身，而是 Less 层面引入了布局冲突：比如在同一个选择器里，既用变量设了 width: @sidebar-width，又写了 left: 0 或 margin-left: auto。浏览器会忽略部分声明，导致位移基准错乱。
另一个隐蔽问题是 @import 顺序不对：animations.less 被 import 在 variables.less 之前，结果 @keyframes 里用了未定义的变量，编译失败但被静默忽略，最终 CSS 里根本没有动画规则。
- 所有抽屉相关样式必须基于
transform，禁用left、right、margin控制显隐 -
@keyframes必须放在顶层，且名称静态；如需复用，用.animation-slide-in() { animation: slideIn @transition-duration ease-out; } - 调试时临时加
outline: 1px solid red到.sidebar，确认真实渲染边界是否和@sidebar-width一致
抽屉动画真正难的不是“怎么动”，而是“动的时候页面其他部分是否还稳”。变量控制宽度只是表层，底层要确保 transform 基准统一、body 溢出锁死时机精准、以及 JS 和 CSS 对断点的理解完全一致——这三个点漏掉任何一个，用户旋转手机那一刻就会出问题。
