Less中不能用变量直接定义timing-function值，必须用Mixin封装；可建命名空间前缀的独立文件统一管理，避免冲突；CSS变量不适用，因cubic-bezier不支持var()语法。
Less中用变量定义timing-function值是否可行
直接不行。transition-timing-function 和 animation-timing-function 的合法值（如 cubic-bezier(0.25, 0.46, 0.45, 0.94)、ease-in-out）是CSS函数或关键字，不能被Less变量“存储后直接插值”——因为Less变量在编译期展开，而CSS函数需要原样透出到最终CSS中，否则浏览器无法识别。
正确做法是用Less的「混合（Mixin）」封装，把timing-function作为参数或预设选项输出完整声明。
用Mixin封装常用贝塞尔曲线并支持参数化调用
把高频使用的cubic-bezier值写成带名称的Mixin，既可复用，又保留CSS原生语义，还能组合其他动画属性：
.ease-in-quad {
transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.ease-out-quad {
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ease-in-out-quart {
transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}
使用时直接调用：.ease-in-quad();。也可扩展为带参数的Mixin，比如控制缓动强度：
.ease-custom(@x1: 0.25, @y1: 0.46, @x2: 0.45, @y2: 0.94) {
transition-timing-function: cubic-bezier(@x1, @y1, @x2, @y2);
}
调用：.ease-custom(0.4, 0.1, 0.25, 0.9);
如何统一管理并避免命名冲突或重复定义
建议建一个独立文件（如 _timing-functions.less），集中定义所有Mixin，并用命名空间前缀防止污染：
- 全部Mixin名以
tf-开头，例如：tf-ease-in-sine、tf-bounce-out - 每个Mixin只负责设置
transition-timing-function或animation-timing-function，不混入transition全量属性（避免耦合过重） - 对非标准曲线（如 bounce、elastic），需确认目标浏览器支持；部分需配合JS动画库，纯CSS实现可能依赖
@keyframes+ 多段贝塞尔拟合 - 若项目已用PostCSS，更推荐用插件（如
postcss-easing-gradients）处理，Less层只留最简语义别名
为什么不用CSS自定义属性（CSS Custom Properties）替代Less Mixin
CSS变量（--ease-out-expo）在运行时生效，但transition-timing-function不接受CSS变量作为函数参数——cubic-bezier(var(--x1), ...) 是无效语法，会触发解析失败，回退为 ease。
所以：Less变量/Mixin → 编译期生成合法CSS；CSS变量 → 仅适用于可继承/可计算的数值型属性（如 opacity、transform 值）。时间函数这类“函数字面量”必须原样落地。
真正容易被忽略的是：同一个贝塞尔值在 transition 和 animation 中语义一致，但若混用 transition 触发 + @keyframes 内再设 animation-timing-function，实际生效的是后者——这种叠加场景下，TimingFunction的优先级和作用域常被误判。
